/* =========================================================
   PROFIL – BASIS
   ========================================================= */

.highlight {
color:#0d0d0d;
background:var(--accent);
border:1px solid var(--fire-bg-dark);}

.appom,
.appom * {
	box-sizing: border-box;
}

.appom {
	width: 100%;
	padding:
		68px
		clamp(34px, 5vw, 72px)
		90px;
}

.profilcard {
	position: relative;

	width: 100%;
	max-width: 1280px;
	margin: 0 auto;

	color: var(--fire-text);
	background: transparent;

	overflow: visible;
}


/* =========================================================
   PROFILKOPF
   ========================================================= */

.profilkopf {
	position: relative;

	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	align-items: center;
	gap: clamp(42px, 6vw, 84px);

	min-height: 220px;
	padding:
		28px
		0
		46px;

	background: transparent;
	border-bottom: 1px solid rgba(165, 195, 200, 0.1);
}

.profilkopf::before {
	content: "CHARAKTERPROFIL";

	position: absolute;
	top: 0;
	left: 0;

	color: var(--fire-accent-light);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.32em;
	line-height: 1.5;
	text-transform: uppercase;
}


/* =========================================================
   AVATAR-RAUTE
   ========================================================= */

.profilavatar {
	position: relative;

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

	width: 150px;
	height: 150px;
}

.profilavatar::after {
	content: "";

	position: absolute;
	z-index: 0;

	width: 105px;
	height: 105px;

	border: 1px solid rgba(165, 195, 200, 0.14);

	transform:
		rotate(45deg)
		translate(8px, 8px);
}

.profilavatar__diamond {
	position: relative;
	z-index: 2;

	width: 108px;
	height: 108px;

	overflow: hidden;

	border: 1px solid rgba(178, 139, 173, 0.65);

	transform: rotate(45deg);

	transition:
		border-color 0.25s ease,
		transform 0.25s ease;
}

.profilavatar__diamond::before {
	content: "";

	position: absolute;
	z-index: 3;
	inset: 7px;

	border: 1px solid rgba(235, 239, 236, 0.16);

	pointer-events: none;
}

.profilavatar__diamond img {
	position: absolute;
	inset: -22%;

	width: 144%;
	height: 144%;

	object-fit: cover;
	object-position: center;

	filter:
		saturate(0.78)
		contrast(1.03)
		brightness(0.86);

	transform: rotate(-45deg);

	transition:
		filter 0.25s ease,
		transform 0.25s ease;
}

.profilavatar__diamond:hover {
	border-color: var(--accent-light);

	transform:
		rotate(45deg)
		scale(1.035);
}

.profilavatar__diamond:hover img {
	filter:
		saturate(0.95)
		contrast(1.02)
		brightness(0.96);

	transform:
		rotate(-45deg)
		scale(1.06);
}


/* =========================================================
   PROFILÜBERSCHRIFT
   ========================================================= */

.profilheader {
	min-width: 0;
}

.profilheader h2 {
	margin: 0;
	padding: 0;

	color: rgba(235, 238, 235, 0.95);
	font-family: var(--fire-display);
	font-size: clamp(48px, 5vw, 76px);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 0.92;
	text-align: left;
	text-transform: none;

	border: 0;
}

.profilheader h2::before,
.profilheader h2::after {
	content: none;
}

.profilzitat {
	position: relative;

	max-width: 760px;
	margin: 24px 0 0;
	padding: 0 0 0 25px;

	color: rgba(200, 208, 205, 0.66);
	font-size: 11px;
	font-style: normal;
	font-weight: 300;
	line-height: 1.8;
}

.profilzitat::before {
	content: "";

	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;

	width: 1px;

	background:
		linear-gradient(
			to bottom,
			var(--accent),
			rgba(178, 139, 173, 0.08)
		);
}


/* =========================================================
   PROFILINHALT
   ========================================================= */

.profilinhalt {
	margin-top: 0;
	padding:
		48px
		0;

	background: transparent !important;
	border-bottom: 1px solid rgba(165, 195, 200, 0.09);
}

.dreispaltig {
	display: grid;
	grid-template-columns:
		minmax(280px, 1fr)
		minmax(320px, 1.15fr)
		250px;
	gap: clamp(38px, 5vw, 72px);

	align-items: start;
}

.zweispaltig {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(38px, 5vw, 72px);
}

.profilspalte {
	min-width: 0;
}

.bildspalte {
	width: 250px;
	max-width: 250px;
}


/* =========================================================
   STECKBRIEFBILD
   ========================================================= */

.bildspalte img {
	display: block;

	width: 250px;
	height: 500px;

	object-fit: cover;
	object-position: center;

	filter:
		saturate(0.74)
		contrast(1.04)
		brightness(0.82);

	border: 1px solid rgba(165, 195, 200, 0.12);

	transition:
		filter 0.25s ease,
		border-color 0.25s ease;
}

.bildspalte img:hover {
	filter:
		saturate(0.95)
		contrast(1.02)
		brightness(0.94);

	border-color: rgba(178, 139, 173, 0.42);
}


/* =========================================================
   PROFILABSCHNITTE
   ========================================================= */

.profilsection {
	position: relative;

	margin: 0 0 42px;
	padding: 0;

	background: transparent;
}

.profilsection:last-child {
	margin-bottom: 0;
}

.profilsection h3 {
	position: relative;

	margin: 0 0 22px;
	padding: 0 0 12px;

	color: var(--fire-accent-light);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.27em;
	line-height: 1.5;
	text-transform: uppercase;

	border: 0;
}

/* =========================================================
   CHARAKTERDATEN
   ========================================================= */

.profilliste {
	display: grid;
	gap: 0;

	margin: 0;
	padding: 0;

	list-style: none;

	border-top: 1px solid rgba(165, 195, 200, 0.08);
}

.profilliste li {
	display: grid;
	grid-template-columns: minmax(125px, 0.46fr) minmax(0, 1fr);
	gap: 20px;

	margin: 0;
	padding: 11px 0;

	color: rgba(203, 211, 208, 0.72);
	font-size: 10px;
	font-weight: 300;
	line-height: 1.65;

	border-bottom: 1px solid rgba(165, 195, 200, 0.08);
}

.profilliste li > strong {
	color: rgba(165, 195, 200, 0.68);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}


/* =========================================================
   FRAKTIONSBADGES
   ========================================================= */

.badge {
	display: inline-flex;
	align-items: center;

	margin:
		2px
		6px
		2px
		0;
	padding: 4px 8px;

	color: rgba(219, 224, 222, 0.78);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;

	background: rgba(178, 139, 173, 0.06);
	border: 1px solid rgba(178, 139, 173, 0.2);
}


/* =========================================================
   LINKS
   ========================================================= */

.stecklink,
.profilsection > a {
	color: var(--accent-light);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;

	border-bottom: 1px solid rgba(178, 139, 173, 0.3);

	transition:
		color 0.18s ease,
		border-color 0.18s ease;
}

.stecklink:hover,
.profilsection > a:hover {
	color: #ffffff;
	border-bottom-color: var(--accent);
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

.kurztext {
	color: rgba(203, 211, 208, 0.7);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.85;

	scrollbar-width: thin;
	scrollbar-color: var(--accent) transparent;
}

.kurztext p {
	margin: 0 0 13px;
}

.kurztext p:last-child {
	margin-bottom: 0;
}

.kurztext::-webkit-scrollbar,
.profilsection::-webkit-scrollbar {
	width: 4px;
}

.kurztext::-webkit-scrollbar-track,
.profilsection::-webkit-scrollbar-track {
	background: transparent;
}

.kurztext::-webkit-scrollbar-thumb,
.profilsection::-webkit-scrollbar-thumb {
	background: rgba(178, 139, 173, 0.4);
}


/* =========================================================
   SZENENKALENDER
   ========================================================= */

.szenenkalender {
	margin-top: 18px;
	padding: 0;

	background: transparent;
	border: 0;
	border-top: 1px solid rgba(165, 195, 200, 0.09);
	border-radius: 0;
}

.kalenderkopf {
	margin: auto;
	padding: 14px 0 11px;
	color: var(--fire-accent-light);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
text-align:center;
	border-bottom: 1px solid rgba(165, 195, 200, 0.08);
}

.szenenliste {
	margin: 0;
	padding: 0;

	list-style: none;
}

.szenenliste li {
	position: relative;

	margin: 0;
	padding:
		11px
		4px
		11px
		18px;

	color: rgba(197, 206, 203, 0.68);
	font-size: 12px;
	line-height: 1.65;

	border-bottom: 1px solid rgba(165, 195, 200, 0.07);
}

.szenenliste li::before {
	content: "—";

	position: absolute;
	top: 11px;
	left: 0;

	color: var(--accent);
}

.szenenliste a {
	color: rgba(185, 145, 179, 0.9);
	font-weight: 600;
	text-decoration: none;

	transition: color 0.18s ease;
}

.szenenliste a:hover {
	color: #ffffff;
}


/* =========================================================
   PROFIL-AKTION
   ========================================================= */

.profilfact {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-top: 16px;
	padding: 7px 12px;

	color: var(--fire-accent-light);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-decoration: none;
	text-transform: uppercase;

	background: transparent;
	border: 1px solid rgba(178, 139, 173, 0.32);
	border-radius: 0;

	transition:
		color 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease;
}

.profilfact:hover {
	color: #ffffff;

	background: rgba(178, 139, 173, 0.07);
	border-color: var(--accent);
}


/* =========================================================
   EREIGNISSE
   ========================================================= */

.profilinhalt:last-of-type {
	margin-top: 0 !important;
	padding-top: 42px;

	background: transparent !important;
}

.profilinhalt:last-of-type .profilsection {
	max-width: 980px;
}

.profilinhalt:last-of-type .kurztext p {
	position: relative;

	margin: 0;
	padding:
		13px
		0
		13px
		112px;

	border-bottom: 1px solid rgba(165, 195, 200, 0.08);
}

.profilinhalt:last-of-type .kurztext p b {
	position: absolute;
	top: 13px;
	left: 0;

	color: var(--accent-light);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.11em;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

	.dreispaltig {
		grid-template-columns:
			minmax(260px, 1fr)
			minmax(300px, 1fr);
	}

	.bildspalte {
		grid-column: 1 / -1;

		width: 100%;
		max-width: none;
	}

	.bildspalte img {
		width: 100%;
		height: 340px;

		object-position: center 25%;
	}

}

@media (max-width: 760px) {

	.appom {
		padding:
			48px
			24px
			70px;
	}

	.profilkopf {
		grid-template-columns: 1fr;
		gap: 28px;

		padding-top: 42px;
	}

	.profilavatar {
		justify-content: flex-start;
	}

	.dreispaltig,
	.zweispaltig {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.profilheader h2 {
		font-size: clamp(44px, 12vw, 62px);
	}

	.profilliste li {
		grid-template-columns: 1fr;
		gap: 5px;
	}

	.bildspalte {
		grid-column: auto;
	}

	.profilinhalt:last-of-type .kurztext p {
		padding-left: 0;
	}

	.profilinhalt:last-of-type .kurztext p b {
		position: static;

		display: block;
		margin-bottom: 5px;
	}

}

/* =========================================================
   ACCOUNTNETZWERK
   ========================================================= */

.profilnetwork,
.profilnetwork * {
	box-sizing: border-box;
}

.profilnetwork {
	position: relative;

	width: 100%;
	max-width: 1280px;
	margin: 0 auto 48px;
	padding:
		30px
		clamp(28px, 4vw, 52px)
		32px;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.018),
			rgba(255, 255, 255, 0.006)
		);

	border: 1px solid rgba(165, 195, 200, 0.11);
}


/* =========================================================
   KOPF
   ========================================================= */

.profilnetwork__header {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) auto;
	align-items: end;
	gap: 36px;

	padding-bottom: 22px;

	border-bottom: 1px solid rgba(165, 195, 200, 0.09);
}

.profilnetwork__heading {
	min-width: 0;
}

.profilnetwork__eyebrow {
	display: block;
	margin-bottom: 7px;

	color: var(--fire-accent-light);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.28em;
	line-height: 1.5;
	text-transform: uppercase;
}

.profilnetwork__title {
	margin: 0;
	padding: 0;

	color: rgba(235, 238, 235, 0.94);
	font-family: var(--fire-display);
	font-size: clamp(30px, 3vw, 43px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	text-align: left;
	text-transform: none;

	border: 0;
}

.profilnetwork__title::before,
.profilnetwork__title::after {
	content: none;
}


/* =========================================================
   PROFILAKTIONEN
   ========================================================= */

.profilnetwork__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}

.profilnetwork__actions > a,
.profilnetwork__generated-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 36px;
	padding: 0 13px;

	color: rgba(200, 211, 208, 0.74);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;

	background: transparent;
	border: 1px solid rgba(165, 195, 200, 0.13);

	transition:
		color 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease;
}

.profilnetwork__actions > a i {
	color: var(--accent);
	font-size: 11px;
}

.profilnetwork__actions > a:hover,
.profilnetwork__generated-link a:hover {
	color: #ffffff;

	background: rgba(178, 139, 173, 0.06);
	border-color: rgba(178, 139, 173, 0.42);
}


/*
 * Manche MyBB-Templates geben {$findposts} und {$findthreads}
 * mit umgebendem Text oder Zeilenumbrüchen aus.
 */
.profilnetwork__generated-link {
	display: contents;
}


/* =========================================================
   WEITERE ACCOUNTS
   ========================================================= */

.profilnetwork__accounts {
	display: grid;
	grid-template-columns:
		repeat(auto-fill, minmax(125px, 1fr));
	gap: 22px 18px;

	padding-top: 27px;
}


/* =========================================================
   EINZELNER ACCOUNT
   ========================================================= */

.profilnetwork__account {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 17px;

	min-width: 0;
	padding: 8px 8px 13px;

	color: rgba(211, 218, 215, 0.78);
	text-align: center;
	text-decoration: none;

	transition:
		color 0.2s ease,
		background 0.2s ease;
}

.profilnetwork__account:hover {
	color: #ffffff;
}


/* =========================================================
   KLEINE AVATAR-RAUTE
   ========================================================= */

.profilnetwork__avatar {
	position: relative;

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

	width: 62px;
	height: 62px;

	overflow: hidden;

	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(178, 139, 173, 0.48);

	transform: rotate(45deg);

	transition:
		border-color 0.22s ease,
		transform 0.22s ease;
}

.profilnetwork__avatar::before {
	position: absolute;
	z-index: 3;
	inset: 5px;

	content: "";

	border: 1px solid rgba(235, 239, 236, 0.12);

	pointer-events: none;
}

.profilnetwork__avatar img {
	position: absolute;
	inset: -22%;

	width: 144%;
	height: 144%;

	object-fit: cover;
	object-position: center;

	filter:
		saturate(0.76)
		contrast(1.03)
		brightness(0.84);

	transform: rotate(-45deg);

	transition:
		filter 0.22s ease,
		transform 0.22s ease;
}

.profilnetwork__account:hover .profilnetwork__avatar {
	border-color: var(--accent-light);

	transform:
		rotate(45deg)
		scale(1.045);
}

.profilnetwork__account:hover .profilnetwork__avatar img {
	filter:
		saturate(0.96)
		contrast(1.02)
		brightness(0.96);

	transform:
		rotate(-45deg)
		scale(1.06);
}


/* Fallback ohne Avatar */

.profilnetwork__fallback {
	color: var(--accent-light);
	font-family: var(--fire-display);
	font-size: 26px;
	line-height: 1;

	transform: rotate(-45deg);
}


/* =========================================================
   ACCOUNTNAME
   ========================================================= */

.profilnetwork__account-name {
	display: block;

	width: 100%;

	overflow: hidden;

	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.45;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* =========================================================
   KEINE WEITEREN ACCOUNTS
   ========================================================= */

.profilnetwork__empty {
	grid-column: 1 / -1;

	margin: 0;
	padding: 2px 0;

	color: rgba(193, 203, 200, 0.62);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.7;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

	.profilnetwork__header {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.profilnetwork__actions {
		justify-content: flex-start;
	}

}

@media (max-width: 600px) {

	.profilnetwork {
		margin-bottom: 38px;
		padding:
			27px
			22px
			29px;
	}

	.profilnetwork__accounts {
		grid-template-columns:
			repeat(auto-fill, minmax(105px, 1fr));
	}

	.profilnetwork__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.profilnetwork__actions > a,
	.profilnetwork__generated-link a {
		width: 100%;
	}

}