/* =========================================================
   PROFIL
   Alle neuen Klassen beginnen mit pf-
   ========================================================= */

:root {

	/* -----------------------------------------------------
	   BESTEHENDE GLOBALE DESIGNVARIABLEN
	----------------------------------------------------- */

	--pf-font:
		var(--sidebit-font);

	--pf-display:
		var(--sidebit-display);

	--pf-bg:
		var(--sidebit-bg);

	--pf-bg-deep:
		var(--sidebit-bg-deep);

	--pf-bg-soft:
		var(--sidebit-bg-soft);

	--pf-panel:
		var(--sidebit-panel);

	--pf-panel-raised:
		var(--sidebit-panel-raised);

	--pf-text:
		var(--sidebit-text);

	--pf-text-soft:
		var(--sidebit-text-soft);

	--pf-text-muted:
		var(--sidebit-text-muted);

	--pf-text-strong:
		var(--sidebit-text-strong);

	--pf-accent-dark:
		var(--sidebit-accent-dark);

	--pf-accent:
		var(--sidebit-accent-light);

	--pf-accent-pale:
		var(--sidebit-accent-pale);

	--pf-line:
		var(--sidebit-line);

	--pf-line-strong:
		var(--sidebit-line-strong);

	--pf-line-accent:
		var(--sidebit-line-accent);

	--pf-transparent:
		var(--sidebit-transparent);


	/* -----------------------------------------------------
	   ERSATZGRAFIKEN
	----------------------------------------------------- */

	--pf-guest-portrait:
		url(/images/profile_guest.jpg);

	--pf-guest-icon:
		url(/images/profile_guest_icon.jpg);


	/* -----------------------------------------------------
	   ZUSÄTZLICHE PROFILFARBEN
	   nur hier echte Farbwerte
	----------------------------------------------------- */

	--pf-accent-wash:
		rgba(116, 27, 42, 0.10);

	--pf-accent-wash-strong:
		rgba(116, 27, 42, 0.18);

	--pf-light-faint:
		rgba(255, 255, 255, 0.018);

	--pf-light-soft:
		rgba(255, 255, 255, 0.035);

	--pf-shadow-color:
		rgba(0, 0, 0, 0.28);

	--pf-shadow-strong:
		rgba(0, 0, 0, 0.48);

	--pf-image-overlay-top:
		rgba(7, 6, 7, 0.00);

	--pf-image-overlay-bottom:
		rgba(7, 6, 7, 0.34);


	/* -----------------------------------------------------
	   VERLÄUFE
	----------------------------------------------------- */

	--pf-hero-gradient:
		linear-gradient(
			135deg,
			var(--pf-panel-raised),
			var(--pf-bg-soft) 48%,
			var(--pf-bg-deep)
		);

	--pf-section-gradient:
		linear-gradient(
			135deg,
			var(--pf-panel),
			var(--pf-bg-soft) 58%,
			var(--pf-bg-deep)
		);

	--pf-accent-gradient:
		linear-gradient(
			to right,
			var(--pf-accent),
			var(--pf-line-accent) 24%,
			var(--pf-line) 58%,
			var(--pf-transparent)
		);

	--pf-vertical-gradient:
		linear-gradient(
			to bottom,
			var(--pf-transparent),
			var(--pf-line-strong),
			var(--pf-transparent)
		);

	--pf-image-overlay:
		linear-gradient(
			to bottom,
			var(--pf-image-overlay-top),
			var(--pf-image-overlay-bottom)
		);


	/* -----------------------------------------------------
	   SCHATTEN
	----------------------------------------------------- */

	--pf-shadow:
		0 20px 56px var(--pf-shadow-color);

	--pf-image-shadow:
		0 18px 44px var(--pf-shadow-strong);


	/* -----------------------------------------------------
	   GRÖSSEN
	----------------------------------------------------- */

	--pf-width: 1380px;

	--pf-radius: 0px;
}


/* =========================================================
   BASIS
   ========================================================= */

.pf-page,
.pf-page * {
	box-sizing: border-box;
}


.pf-page {
	width:
		min(
			calc(100% - 50px),
			var(--pf-width)
		);

	margin: 0 auto;

	padding:
		48px
		0
		100px;

	color: var(--pf-text);

	font-family: var(--pf-font);
	font-size: 15px;
	line-height: 1.72;
}


/* =========================================================
   GEMEINSAME KLEINE ÜBERSCHRIFT
   ========================================================= */

.pf-eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;

	margin: 0 0 8px;

	color: var(--pf-accent);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.5;

	text-transform: uppercase;
}


.pf-eyebrow::before {
	width: 5px;
	height: 5px;

	content: "";

	border:
		1px solid
		var(--pf-accent);

	transform: rotate(45deg);
}


/* =========================================================
   HERO
   ========================================================= */

.pf-hero {
	position: relative;

	display: grid;

	grid-template-columns:
		150px
		minmax(0, 1fr)
		290px;

	align-items: center;
	gap: clamp(30px, 4vw, 58px);

	min-height: 430px;

	padding:
		38px
		clamp(34px, 4vw, 56px);

	background: var(--pf-hero-gradient);

	border:
		1px solid
		var(--pf-line);

	box-shadow: var(--pf-shadow);
}


.pf-hero::before {
	position: absolute;

	top: -1px;
	left: 38px;

	width: 98px;
	height: 1px;

	content: "";

	background: var(--pf-accent);
}


.pf-hero::after {
	position: absolute;

	right: 38px;
	bottom: -1px;

	width: 160px;
	height: 1px;

	content: "";

	background: var(--pf-accent-gradient);
}


/* ---------------------------------------------------------
   HERO ICON
   --------------------------------------------------------- */

.pf-hero__icon-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}


.pf-hero__icon {
	position: relative;

	width: 92px;
	height: 92px;

	overflow: hidden;

	background: var(--pf-bg-deep);

	border:
		1px solid
		var(--pf-line-strong);

	transform: rotate(45deg);

	box-shadow:
		0 12px 30px
		var(--pf-shadow-color);
}


.pf-hero__icon img,
.pf-guest-icon {
	position: absolute;

	inset: -21%;

	display: block;

	width: 142%;
	height: 142%;

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

	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	transform: rotate(-45deg);
}


.pf-guest-icon {
	background-image:
		var(--pf-image-overlay),
		var(--pf-guest-icon);
}


.pf-hero__icon-caption {
	color: var(--pf-text-muted);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.5;

	text-align: center;
	text-transform: uppercase;
}


/* ---------------------------------------------------------
   HERO CONTENT
   --------------------------------------------------------- */

.pf-hero__content {
	min-width: 0;
}


.pf-hero__name {
	max-width: 100%;

	margin: 0;
	padding: 0;

	color: var(--pf-text-strong);

	font-family: var(--pf-display);
	font-size: clamp(50px, 5.8vw, 82px);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 0.92;

	overflow-wrap: anywhere;
	word-break: break-word;
}


.pf-hero__name::before,
.pf-hero__name::after {
	display: none;

	content: none;
}


.pf-hero__quote {
	max-width: 760px;

	margin-top: 22px;
	padding-left: 20px;

	color: var(--pf-text-soft);

	font-family: var(--pf-display);
	font-size: 19px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.55;

	border-left:
		1px solid
		var(--pf-accent-dark);
}


.pf-hero__quickfacts {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0;

	margin-top: 28px;

	border-top:
		1px solid
		var(--pf-line);

	border-bottom:
		1px solid
		var(--pf-line);
}


.pf-hero__quickfacts span {
	position: relative;

	display: flex;
	flex-direction: column;
	gap: 4px;

	min-width: 150px;

	padding:
		13px
		22px
		13px
		0;

	margin-right: 22px;

	color: var(--pf-text-soft);

	font-size: 12px;
	line-height: 1.5;
}


.pf-hero__quickfacts span:not(:last-child)::after {
	position: absolute;

	top: 11px;
	right: 0;
	bottom: 11px;

	width: 1px;

	content: "";

	background: var(--pf-vertical-gradient);
}


.pf-hero__quickfacts b {
	color: var(--pf-accent);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;

	text-transform: uppercase;
}


/* ---------------------------------------------------------
   HERO ACTIONS
   --------------------------------------------------------- */

.pf-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;

	margin-top: 24px;
}


.pf-action,
.pf-action a {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	color: var(--pf-text-soft);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.4;

	text-decoration: none;
	text-transform: uppercase;
}


.pf-action {
	padding:
		7px
		0;

	border-bottom:
		1px solid
		var(--pf-line-accent);
}


.pf-action:hover,
.pf-action:hover a,
.pf-action a:hover {
	color: var(--pf-accent-pale);
}


.pf-action--generated {
	padding: 0;

	border-bottom: 0;
}


.pf-action--generated a {
	padding:
		7px
		0;

	border-bottom:
		1px solid
		var(--pf-line-accent);
}


.pf-action--icon {
	justify-content: center;

	width: 38px;
	height: 38px;

	padding: 0;

	border:
		1px solid
		var(--pf-line-strong);
}


/* ---------------------------------------------------------
   HERO PORTRAIT
   --------------------------------------------------------- */

.pf-hero__portrait-wrap {
	position: relative;

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

	min-width: 0;
}


.pf-hero__portrait-wrap::before {
	position: absolute;

	top: 18px;
	bottom: 18px;
	left: -30px;

	width: 1px;

	content: "";

	background: var(--pf-vertical-gradient);
}


.pf-hero__portrait {
	position: relative;

	width: 100%;
	max-width: 270px;
	aspect-ratio: 2 / 3;

	overflow: hidden;

	background: var(--pf-panel);

	border:
		1px solid
		var(--pf-line-strong);

	box-shadow: var(--pf-image-shadow);
}


.pf-hero__portrait img,
.pf-guest-portrait {
	position: absolute;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

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

	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}


.pf-guest-portrait {
	background-image:
		var(--pf-image-overlay),
		var(--pf-guest-portrait);
}


.pf-hero__portrait::after {
	position: absolute;
	z-index: 2;

	inset: 0;

	content: "";

	pointer-events: none;

	background: var(--pf-image-overlay);
}


.pf-hero__portrait-frame {
	position: absolute;
	z-index: 3;

	inset: 9px;

	pointer-events: none;

	border:
		1px solid
		var(--pf-line);
}


/* =========================================================
   SPRUNGNAVIGATION
   ========================================================= */

.pf-jumpnav {
	position: relative;

	display: flex;
	align-items: center;

	width: 100%;

	margin:
		18px
		0
		54px;

	overflow-x: auto;

	background: var(--pf-bg-deep);

	border-top:
		1px solid
		var(--pf-line);

	border-bottom:
		1px solid
		var(--pf-line);

	scrollbar-width: thin;
}


.pf-jumpnav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 1 0 auto;

	min-height: 48px;
	padding:
		0
		20px;

	color: var(--pf-text-muted);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.4;

	text-decoration: none;
	text-transform: uppercase;

	border-right:
		1px solid
		var(--pf-line);
}


.pf-jumpnav a:hover {
	color: var(--pf-accent-pale);

	background: var(--pf-accent-wash);
}


.pf-jumpnav__schedule {
	flex:
		0
		0
		50px !important;

	width: 50px;
	padding: 0 !important;

	color:
		var(--pf-accent) !important;
}


/* =========================================================
   SEKTIONEN
   ========================================================= */

.pf-section,
.pf-network {
	position: relative;

	margin-top: 58px;
}


.pf-section__header,
.pf-network__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 34px;

	margin-bottom: 24px;
	padding-bottom: 20px;

	border-bottom:
		1px solid
		var(--pf-line-strong);
}


.pf-section__header > div,
.pf-network__heading {
	min-width: 0;
}


.pf-section__title,
.pf-network__title {
	margin: 0;
	padding: 0;

	color: var(--pf-text-strong);

	font-family: var(--pf-display);
	font-size: clamp(34px, 3.5vw, 50px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1;
}


.pf-section__title::before,
.pf-section__title::after,
.pf-network__title::before,
.pf-network__title::after {
	display: none;

	content: none;
}


.pf-section__header p {
	max-width: 520px;

	margin: 0;

	color: var(--pf-text-muted);

	font-size: 13px;
	line-height: 1.7;
}


/* =========================================================
   GENERAL / DATEN
   ========================================================= */

.pf-data-group {
	margin-top: 28px;

	padding:
		28px
		clamp(26px, 3vw, 38px)
		32px;

	background: var(--pf-section-gradient);

	border:
		1px solid
		var(--pf-line);
}


.pf-data-group__title {
	margin:
		0
		0
		20px;
	padding:
		0
		0
		12px;

	color: var(--pf-accent-pale);

	font-family: var(--pf-display);
	font-size: 25px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.05;

	text-transform: none;

	border-bottom:
		1px solid
		var(--pf-line);
}


.pf-data-group__title::before,
.pf-data-group__title::after {
	display: none;

	content: none;
}


.pf-facts {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap:
		1px
		1px;

	background: var(--pf-line);
}


.pf-fact {
	min-width: 0;
	min-height: 92px;

	padding:
		17px
		18px;

	background: var(--pf-bg-soft);
}


.pf-fact--wide {
	grid-column:
		span
		2;
}


.pf-fact__label {
	display: block;

	margin-bottom: 7px;

	color: var(--pf-accent);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.45;

	text-transform: uppercase;
}


.pf-fact__value {
	color: var(--pf-text);

	font-size: 13px;
	line-height: 1.65;

	overflow-wrap: anywhere;
}


.pf-fact__value--long {
	color: var(--pf-text-soft);
}


.pf-fact__value small {
	color: var(--pf-text-muted);

	font-size: 11px;
	line-height: 1.55;
}


/* =========================================================
   CHARACTER
   ========================================================= */

.pf-character-grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 18px;
}


.pf-traits {
	position: relative;

	min-width: 0;

	padding:
		28px
		30px;

	background: var(--pf-section-gradient);

	border:
		1px solid
		var(--pf-line);
}


.pf-traits::before {
	position: absolute;

	top: -1px;
	left: 28px;

	width: 68px;
	height: 1px;

	content: "";

	background: var(--pf-accent);
}


.pf-traits--negative::before {
	background: var(--pf-accent-dark);
}


.pf-traits__label {
	display: block;

	margin-bottom: 15px;
	padding-bottom: 12px;

	color: var(--pf-accent-pale);

	font-family: var(--pf-display);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.1;

	border-bottom:
		1px solid
		var(--pf-line);
}


.pf-traits__text,
.pf-didyouknow__text {
	color: var(--pf-text-soft);

	font-size: 14px;
	line-height: 1.8;
}


.pf-didyouknow {
	margin-top: 18px;

	padding:
		30px
		clamp(28px, 4vw, 48px);

	background: var(--pf-bg-deep);

	border:
		1px solid
		var(--pf-line);
}


.pf-didyouknow__header {
	margin-bottom: 18px;
}


.pf-didyouknow__header h3 {
	margin: 0;
	padding: 0;

	color: var(--pf-text-strong);

	font-family: var(--pf-display);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.05;

	text-transform: none;
}


.pf-didyouknow__header h3::before,
.pf-didyouknow__header h3::after {
	display: none;

	content: none;
}


/* =========================================================
   MAGICAL ME
   ========================================================= */

.pf-magical-grid {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 14px;
}


.pf-magical-card {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	min-width: 0;
	min-height: 170px;

	padding:
		24px
		22px;

	background: var(--pf-section-gradient);

	border:
		1px solid
		var(--pf-line);
}


.pf-magical-card i {
	margin-bottom: 24px;

	color: var(--pf-accent);

	font-size: 22px;
}


.pf-magical-card span {
	margin-bottom: 7px;

	color: var(--pf-text-muted);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;

	text-transform: uppercase;
}


.pf-magical-card strong {
	color: var(--pf-text-strong);

	font-family: var(--pf-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.15;

	overflow-wrap: anywhere;
}


.pf-exams {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 18px;

	margin-top: 18px;
}


.pf-exam {
	min-width: 0;

	background: var(--pf-bg-soft);

	border:
		1px solid
		var(--pf-line);
}


.pf-exam header {
	display: flex;
	align-items: baseline;
	gap: 13px;

	padding:
		18px
		22px;

	background: var(--pf-accent-wash);

	border-bottom:
		1px solid
		var(--pf-line);
}


.pf-exam header span {
	color: var(--pf-accent);

	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
}


.pf-exam header h3 {
	margin: 0;
	padding: 0;

	color: var(--pf-text-strong);

	font-family: var(--pf-display);
	font-size: 25px;
	font-weight: 600;
	line-height: 1;

	text-transform: none;
}


.pf-exam header h3::before,
.pf-exam header h3::after {
	display: none;

	content: none;
}


.pf-exam__content {
	min-height: 180px;

	padding:
		22px
		24px;

	color: var(--pf-text-soft);

	font-size: 13px;
	line-height: 1.8;

	white-space: pre-line;
}


/* =========================================================
   MY STORY
   ========================================================= */

.pf-story {
	display: grid;

	grid-template-columns:
		70px
		minmax(0, 1fr);

	min-width: 0;

	background: var(--pf-section-gradient);

	border:
		1px solid
		var(--pf-line);
}


.pf-story__mark {
	display: flex;
	align-items: flex-start;
	justify-content: center;

	padding-top: 32px;

	color: var(--pf-accent);

	font-size: 20px;

	border-right:
		1px solid
		var(--pf-line);
}


.pf-story__content {
	padding:
		32px
		clamp(28px, 4vw, 50px);

	color: var(--pf-text-soft);

	font-size: 14px;
	line-height: 1.9;

	white-space: pre-line;
}


/* =========================================================
   SZENEN / KALENDER
   ========================================================= */

.pf-scenes__schedule {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	flex-shrink: 0;

	padding:
		9px
		12px;

	color: var(--pf-accent-pale);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;

	text-decoration: none;
	text-transform: uppercase;

	border:
		1px solid
		var(--pf-line-strong);
}


.pf-scenes__schedule:hover {
	color: var(--pf-text-strong);

	background: var(--pf-accent-wash);
}


.pf-scenes__tracker {
	position: relative;

	min-width: 0;

	padding:
		30px
		clamp(24px, 3vw, 38px);

	overflow-x: auto;

	background: var(--pf-bg-soft);

	border:
		1px solid
		var(--pf-line);

	scrollbar-width: thin;
}


.pf-scenes__tracker table {
	max-width: 100%;

	color: var(--pf-text);

	font-family: var(--pf-font);
}


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

.pf-network {
	padding:
		30px
		clamp(28px, 4vw, 46px)
		34px;

	background: var(--pf-section-gradient);

	border:
		1px solid
		var(--pf-line);
}


.pf-network__header {
	margin-bottom: 28px;
}


.pf-network__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
}


.pf-network__actions > a,
.pf-network__generated-link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;

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

	color: var(--pf-text-soft);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.09em;

	text-decoration: none;
	text-transform: uppercase;

	border:
		1px solid
		var(--pf-line);
}


.pf-network__actions > a:hover,
.pf-network__generated-link a:hover {
	color: var(--pf-accent-pale);

	border-color: var(--pf-line-accent);
}


.pf-network__accounts {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 22px 30px;
}


.pf-network__account {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;

	width: 92px;

	color: var(--pf-text-soft);

	text-align: center;
	text-decoration: none;
}


.pf-network__avatar {
	position: relative;

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

	width: 66px;
	height: 66px;

	overflow: hidden;

	background: var(--pf-bg-deep);

	border:
		1px solid
		var(--pf-line-strong);

	transform: rotate(45deg);
}


.pf-network__avatar img,
.pf-network__guest-avatar,
.pf-network__fallback {
	position: absolute;

	inset: -22%;

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

	width: 144%;
	height: 144%;

	object-fit: cover;

	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	transform: rotate(-45deg);
}


.pf-network__guest-avatar {
	background-image:
		var(--pf-image-overlay),
		var(--pf-guest-icon);
}


.pf-network__fallback {
	color: var(--pf-accent-pale);

	font-family: var(--pf-display);
	font-size: 30px;
	font-weight: 600;
}


.pf-network__account-name {
	max-width: 100%;

	color: var(--pf-text-soft);

	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;

	overflow-wrap: anywhere;
}


.pf-network__account:hover
.pf-network__account-name {
	color: var(--pf-accent-pale);
}


.pf-network__empty {
	margin: 0;

	color: var(--pf-text-muted);

	font-size: 13px;
	font-style: italic;
	line-height: 1.7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

	.pf-page {
		width:
			calc(100% - 36px);
	}


	.pf-hero {
		grid-template-columns:
			110px
			minmax(0, 1fr)
			230px;

		gap: 30px;

		padding:
			32px;
	}


	.pf-hero__icon {
		width: 78px;
		height: 78px;
	}


	.pf-hero__portrait {
		max-width: 220px;
	}


	.pf-facts {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}


	.pf-magical-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px), (max-device-width: 820px) {

	.pf-page {
		width: 100%;

		padding:
			30px
			18px
			70px;

		font-size: 17px;
		line-height: 1.74;
	}


	/* Hero */

	.pf-hero {
		display: grid;

		grid-template-columns:
			82px
			minmax(0, 1fr);

		gap:
			24px
			20px;

		min-height: 0;

		padding:
			27px
			22px
			30px;
	}


	.pf-hero__icon-wrap {
		align-self: start;

		gap: 18px;
	}


	.pf-hero__icon {
		width: 66px;
		height: 66px;
	}


	.pf-hero__icon-caption {
		font-size: 10px;
	}


	.pf-hero__content {
		align-self: center;
	}


	.pf-eyebrow {
		font-size: 12px;
		letter-spacing: 0.17em;
	}


	.pf-hero__name {
		font-size:
			clamp(
				42px,
				10vw,
				58px
			);

		line-height: 0.98;
	}


	.pf-hero__quote {
		grid-column:
			1
			/
			-1;

		margin-top: 18px;

		font-size: 18px;
		line-height: 1.6;
	}


	.pf-hero__quickfacts {
		gap: 0;

		margin-top: 22px;
	}


	.pf-hero__quickfacts span {
		min-width: 50%;

		padding:
			12px
			14px
			12px
			0;

		margin-right: 14px;

		font-size: 14px;
	}


	.pf-hero__quickfacts b {
		font-size: 11px;
	}


	.pf-action,
	.pf-action a {
		font-size: 12px;
	}


	.pf-hero__portrait-wrap {
		grid-column:
			1
			/
			-1;

		padding-top: 6px;
	}


	.pf-hero__portrait-wrap::before {
		display: none;
	}


	.pf-hero__portrait {
		width: 190px;
		max-width: 190px;
	}


	/* Navigation */

	.pf-jumpnav {
		margin-bottom: 44px;
	}


	.pf-jumpnav a {
		flex:
			0
			0
			auto;

		min-height: 52px;

		padding:
			0
			18px;

		font-size: 12px;
	}


	/* Sections */

	.pf-section,
	.pf-network {
		margin-top: 46px;
	}


	.pf-section__header,
	.pf-network__header {
		align-items: flex-start;
		flex-direction: column;

		gap: 14px;
	}


	.pf-section__title,
	.pf-network__title {
		font-size:
			clamp(
				34px,
				8vw,
				44px
			);
	}


	.pf-section__header p {
		max-width: none;

		font-size: 16px;
		line-height: 1.72;
	}


	/* Facts */

	.pf-data-group {
		padding:
			24px
			20px
			26px;
	}


	.pf-data-group__title {
		font-size: 27px;
	}


	.pf-facts {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.pf-fact--wide {
		grid-column:
			1
			/
			-1;
	}


	.pf-fact__label {
		font-size: 11px;
	}


	.pf-fact__value {
		font-size: 15px;
		line-height: 1.68;
	}


	.pf-fact__value small {
		font-size: 13px;
	}


	/* Character */

	.pf-character-grid {
		grid-template-columns: 1fr;
	}


	.pf-traits {
		padding:
			25px
			22px;
	}


	.pf-traits__label {
		font-size: 27px;
	}


	.pf-traits__text,
	.pf-didyouknow__text {
		font-size: 16px;
		line-height: 1.75;
	}


	.pf-didyouknow {
		padding:
			26px
			22px;
	}


	/* Magic */

	.pf-magical-card span {
		font-size: 11px;
	}


	.pf-magical-card strong {
		font-size: 24px;
	}


	.pf-exams {
		grid-template-columns: 1fr;
	}


	.pf-exam__content {
		font-size: 16px;
		line-height: 1.75;
	}


	/* Story */

	.pf-story {
		grid-template-columns: 48px minmax(0, 1fr);
	}


	.pf-story__content {
		padding:
			26px
			22px;

		font-size: 16px;
		line-height: 1.82;
	}


	/* Scenes */

	.pf-scenes__schedule {
		font-size: 12px;
	}


	.pf-scenes__tracker {
		padding:
			22px
			18px;
	}


	/* Network */

	.pf-network {
		padding:
			26px
			21px
			30px;
	}


	.pf-network__actions {
		justify-content: flex-start;
	}


	.pf-network__actions > a,
	.pf-network__generated-link a {
		font-size: 11px;
	}


	.pf-network__account {
		width: 84px;
	}


	.pf-network__account-name {
		font-size: 13px;
	}

}


/* =========================================================
   KLEINE HANDYS
   ========================================================= */

@media (max-width: 520px), (max-device-width: 520px) {

	.pf-page {
		padding:
			26px
			14px
			60px;
	}


	.pf-hero {
		grid-template-columns: 1fr;

		padding:
			24px
			18px
			28px;
	}


	.pf-hero__icon-wrap {
		align-items: flex-start;

		width: 100%;
	}


	.pf-hero__icon {
		width: 72px;
		height: 72px;
	}


	.pf-hero__icon-caption {
		text-align: left;
	}


	.pf-hero__name {
		font-size:
			clamp(
				41px,
				13vw,
				54px
			);
	}


	.pf-hero__quote {
		font-size: 18px;
	}


	.pf-hero__quickfacts {
		display: block;
	}


	.pf-hero__quickfacts span {
		width: 100%;
		min-width: 0;

		margin: 0;
		padding:
			12px
			0;

		border-bottom:
			1px solid
			var(--pf-line);
	}


	.pf-hero__quickfacts span:not(:last-child)::after {
		display: none;
	}


	.pf-hero__portrait {
		width: 175px;
		max-width: 175px;
	}


	.pf-facts {
		grid-template-columns: 1fr;
	}


	.pf-fact,
	.pf-fact--wide {
		grid-column: auto;
	}


	.pf-fact__label {
		font-size: 12px;
	}


	.pf-fact__value {
		font-size: 16px;
	}


	.pf-magical-grid {
		grid-template-columns: 1fr;
	}


	.pf-magical-card {
		min-height: 145px;
	}


	.pf-story {
		display: block;
	}


	.pf-story__mark {
		justify-content: flex-start;

		padding:
			20px
			20px
			0;

		border-right: 0;
	}


	.pf-story__content {
		font-size: 17px;
		line-height: 1.82;
	}


	.pf-traits__text,
	.pf-didyouknow__text,
	.pf-exam__content {
		font-size: 17px;
	}


	.pf-network__accounts {
		gap:
			22px
			24px;
	}

}

.pf-hero__quote a:link,.pf-hero__quote a:visited{color:inherit;font:inherit;text-decoration:none}.pf-hero__quote a:hover,.pf-hero__quote a:active{color:var(--fire-accent-light)}