/* =====================================================
   PROFIL · EDITORIAL CHARACTER DOSSIER
   nutzt ausschließlich die vorhandenen --owlh-* Farben
===================================================== */

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

.owlprof {
	width: 100%;
	color: var(--owlh-text);
}

.owlprof a {
	color: inherit;
	text-decoration: none;
	transition:
		color .18s ease,
		background .18s ease,
		border-color .18s ease,
		opacity .18s ease;
}


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

.owlprof-hero {
	position: relative;
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 30px;
	min-height: 580px;
	padding: 28px;
	overflow: hidden;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border);
	box-shadow: 0 7px 25px var(--owlh-shadow);
}

.owlprof-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	height: 3px;
	background: var(--owlh-accent);
}


/* =====================================================
   GROSSES PROFILBILD
===================================================== */

.owlprof-portrait-wrap {
	position: relative;
	min-width: 0;
}

.owlprof-portrait {
	width: 250px;
	height: 580px;
	background-color: var(--owlh-surface-deep);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.owlprof-portrait-label {
	position: absolute;
	right: -1px;
	bottom: 22px;
	padding: 7px 10px;
	background: var(--owlh-nav-bg);
	color: var(--owlh-nav-text);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
}


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

.owlprof-hero-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.owlprof-hero-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 28px;
	align-items: start;
}


/* =====================================================
   NAME / INTRO
===================================================== */

.owlprof-eyebrow {
	margin: 5px 0 7px;
	color: var(--owlh-accent);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.owlprof-name {
	margin: 0;
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(35px, 4vw, 54px);
	font-weight: normal;
	line-height: .95;
}

.owlprof-name a,
.owlprof-name span {
	color: inherit;
}

.owlprof-title {
	margin: 10px 0 19px;
	padding: 6px 9px;
	display: inline-block;
	background: var(--owlh-nav-bg);
	color: var(--owlh-nav-text);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.owlprof-bio {
	max-height: 250px;
	padding-right: 9px;
	overflow-y: auto;
	color: var(--owlh-text-soft);
	font-size: 10px;
	line-height: 1.75;
	text-align: justify;
}


/* =====================================================
   AVATAR
===================================================== */

.owlprof-avatar {
	width: 280px;
	height: 230px;
	overflow: hidden;
	background: var(--owlh-surface-deep);
	border: 7px solid var(--owlh-surface);
	box-shadow: 0 5px 18px var(--owlh-shadow);
}

.owlprof-avatar img {
	width: 100% !important;
	height: 100% !important;
	display: block;
	object-fit: cover;
	object-position: center;
}


/* =====================================================
   ZITAT
===================================================== */

.owlprof-quote {
	position: relative;
	max-width: 620px;
	margin: 34px 0 0 28px;
	padding: 10px 0 10px 28px;
	color: var(--owlh-text-soft);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	font-style: italic;
	line-height: 1.6;
}

.owlprof-quote::before {
	content: "“";
	position: absolute;
	top: -16px;
	left: -5px;
	color: var(--owlh-accent);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 58px;
	font-style: normal;
	line-height: 1;
	opacity: .8;
}


/* =====================================================
   SIGNATUR
===================================================== */

.owlprof-signature {
	width: min(440px, 100%);
	margin: auto 0 0 auto;
	padding-top: 28px;
	text-align: right;
}

.owlprof-signature img {
	max-width: 100% !important;
	height: auto !important;
}


/* =====================================================
   KAPITELNAVIGATION
===================================================== */

.owlprof-jumpnav {
	margin: 14px 0 30px;
	padding: 0 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	background: var(--owlh-nav-bg);
	border: 1px solid var(--owlh-nav-bg);
}

.owlprof-jumpnav a {
	position: relative;
	padding: 14px 17px 12px;
	color: var(--owlh-nav-muted);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.owlprof-jumpnav a::after {
	content: "";
	position: absolute;
	right: 0;
	top: 15px;
	bottom: 15px;
	width: 1px;
	background: var(--owlh-border-strong);
	opacity: .35;
}

.owlprof-jumpnav a:last-child::after {
	display: none;
}

.owlprof-jumpnav a:hover {
	color: var(--owlh-nav-text);
}

.owlprof-jumpnav a:hover::before {
	content: "";
	position: absolute;
	right: 15px;
	bottom: -1px;
	left: 15px;
	height: 2px;
	background: var(--owlh-accent);
}


/* =====================================================
   KAPITEL
===================================================== */

.owlprof-section {
	scroll-margin-top: 20px;
	margin-bottom: 22px;
	padding: 28px;
	display: grid;
	grid-template-columns: 175px minmax(0, 1fr);
	gap: 28px;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border);
	box-shadow: 0 5px 18px var(--owlh-shadow);
}

.owlprof-section-side {
	padding-right: 20px;
	border-right: 1px solid var(--owlh-border-soft);
}

.owlprof-number {
	margin-bottom: 8px;
	color: var(--owlh-accent-soft);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 47px;
	line-height: .8;
}

.owlprof-section-kicker {
	margin-bottom: 5px;
	color: var(--owlh-accent);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .19em;
	text-transform: uppercase;
}

.owlprof-section-title {
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 24px;
	font-weight: normal;
	line-height: 1.05;
}

.owlprof-section-desc {
	margin-top: 10px;
	color: var(--owlh-text-muted);
	font-size: 8px;
	line-height: 1.55;
}

.owlprof-section-main {
	min-width: 0;
}


/* =====================================================
   STATISTIK
===================================================== */

.owlprof-player {
	margin-bottom: 18px;
}

.owlprof-player-name {
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 27px;
	line-height: 1;
}

.owlprof-player-sub {
	margin-top: 5px;
	color: var(--owlh-text-muted);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.owlprof-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--owlh-border-soft);
	border-bottom: 1px solid var(--owlh-border-soft);
}

.owlprof-fact {
	min-width: 0;
	padding: 14px 13px;
	border-right: 1px solid var(--owlh-border-soft);
}

.owlprof-fact:last-child {
	border-right: 0;
}

.owlprof-fact-label {
	margin-bottom: 4px;
	color: var(--owlh-text-muted);
	font-size: 6px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.owlprof-fact-value {
	color: var(--owlh-text-soft);
	font-size: 9px;
	line-height: 1.4;
}

.owlprof-actions {
	margin: 14px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.owlprof-actions a {
	padding: 8px 11px;
	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border);
	color: var(--owlh-text-soft);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.owlprof-actions a:hover {
	background: var(--owlh-accent);
	border-color: var(--owlh-accent);
	color: var(--owlh-hero-text);
}


/* =====================================================
   ATTACHED / SPIELERINFOS
===================================================== */

.owlprof-attached {
	margin-top: 20px;
	padding: 18px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}


/* =====================================================
   BADGES / AWARDS
===================================================== */

.owlprof-awardarea {
	margin-top: 18px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.owlprof-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.owlprof-badge img {
	width: 65px;
	height: 65px;
	display: block;
	object-fit: contain;
}

.owlprof-awards {
	min-width: 0;
}

.owlprof-awards table {
	width: 100%;
	border-collapse: collapse;
}


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

.owlprof-scenegrid {
	display: grid;
	grid-template-columns: .75fr 1.25fr;
	gap: 16px;
}

.owlprof-innerbox {
	min-width: 0;
	padding: 18px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

.owlprof-inner-title {
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--owlh-border-soft);
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
}


/* =====================================================
   RELATIONEN
===================================================== */

.owlprof-relations {
	min-width: 0;
}

.owlprof-npc {
	margin-bottom: 20px;
	padding: 18px;
	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border);
}

.owlprof-npc-title {
	margin-bottom: 12px;
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
}

.owlprof-npc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.owlprof-npc-full {
	grid-column: 1 / -1;
}

.owlprof-npc input[type="text"],
.owlprof-npc select {
	width: 100% !important;
	min-height: 36px;
	padding: 8px 9px;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border);
	color: var(--owlh-text);
	font-family: inherit;
	font-size: 9px;
	outline: 0;
}

.owlprof-npc input[type="text"]:focus,
.owlprof-npc select:focus {
	border-color: var(--owlh-accent);
}

.owlprof-npc .button {
	padding: 9px 14px;
	background: var(--owlh-accent);
	border: 1px solid var(--owlh-accent);
	color: var(--owlh-hero-text);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}


/* =====================================================
   GESUCHE
===================================================== */

.owlprof-wanted-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.owlprof-wanted-card {
	min-width: 0;
	overflow: hidden;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

.owlprof-wanted-image {
	width: 100%;
	aspect-ratio: 17 / 9;
	overflow: hidden;
	background: var(--owlh-surface-deep);
}

.owlprof-wanted-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.owlprof-wanted-body {
	padding: 13px;
}

.owlprof-wanted-name {
	margin-bottom: 7px;
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	line-height: 1.1;
}

.owlprof-wanted-name a:hover {
	color: var(--owlh-accent);
}

.owlprof-wanted-text {
	max-height: 90px;
	padding-right: 5px;
	overflow-y: auto;
	color: var(--owlh-text-soft);
	font-size: 8px;
	line-height: 1.55;
	text-align: justify;
}

.owlprof-empty {
	padding: 25px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
	color: var(--owlh-text-muted);
	font-size: 9px;
	text-align: center;
}


/* =====================================================
   HOGWARTS
===================================================== */

.owlprof-schoolfacts {
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--owlh-border-soft);
}

.owlprof-schoolfact {
	padding: 15px;
	background: var(--owlh-surface);
	border-right: 1px solid var(--owlh-border-soft);
}

.owlprof-schoolfact:last-child {
	border-right: 0;
}

.owlprof-school-label {
	margin-bottom: 4px;
	color: var(--owlh-text-muted);
	font-size: 6px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.owlprof-school-value {
	color: var(--owlh-text-soft);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
}

.owlprof-timetable {
	padding: 18px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}


/* =====================================================
   SCROLLBARS
===================================================== */

.owlprof-bio,
.owlprof-wanted-text {
	scrollbar-width: thin;
	scrollbar-color: var(--owlh-scroll-thumb) var(--owlh-scroll-track);
}

.owlprof-bio::-webkit-scrollbar,
.owlprof-wanted-text::-webkit-scrollbar {
	width: 4px;
}

.owlprof-bio::-webkit-scrollbar-track,
.owlprof-wanted-text::-webkit-scrollbar-track {
	background: var(--owlh-scroll-track);
}

.owlprof-bio::-webkit-scrollbar-thumb,
.owlprof-wanted-text::-webkit-scrollbar-thumb {
	background: var(--owlh-scroll-thumb);
}


/* =====================================================
   ALLGEMEINE PROFILINHALTE
===================================================== */

.owlprof-section-main a {
	color: var(--owlh-accent);
}

.owlprof-section-main a:hover {
	color: var(--owlh-accent-hover);
}

.owlprof-section-main img {
	max-width: 100%;
}


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

@media (max-width: 1050px) {

	.owlprof-hero {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.owlprof-portrait {
		width: 220px;
	}

	.owlprof-hero-top {
		grid-template-columns: minmax(0, 1fr) 230px;
	}

	.owlprof-avatar {
		width: 230px;
		height: 200px;
	}

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

}


@media (max-width: 800px) {

	.owlprof-hero {
		display: block;
		padding: 18px;
	}

	.owlprof-portrait-wrap {
		float: left;
		width: 180px;
		margin: 0 20px 15px 0;
	}

	.owlprof-portrait {
		width: 180px;
		height: 400px;
	}

	.owlprof-hero-top {
		display: block;
	}

	.owlprof-avatar {
		width: 220px;
		height: 180px;
		margin-top: 20px;
	}

	.owlprof-signature {
		clear: both;
	}

	.owlprof-section {
		grid-template-columns: 1fr;
	}

	.owlprof-section-side {
		padding: 0 0 15px;
		border-right: 0;
		border-bottom: 1px solid var(--owlh-border-soft);
	}

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

	.owlprof-fact:nth-child(2) {
		border-right: 0;
	}

	.owlprof-fact:nth-child(-n+2) {
		border-bottom: 1px solid var(--owlh-border-soft);
	}

	.owlprof-scenegrid {
		grid-template-columns: 1fr;
	}

}


@media (max-width: 560px) {

	.owlprof-portrait-wrap {
		float: none;
		width: 100%;
		margin: 0 0 20px;
	}

	.owlprof-portrait {
		width: 100%;
		height: 480px;
	}

	.owlprof-avatar {
		width: 100%;
		height: 240px;
	}

	.owlprof-quote {
		margin-left: 0;
	}

	.owlprof-jumpnav {
		justify-content: flex-start;
	}

	.owlprof-jumpnav a {
		padding: 12px 9px;
	}

	.owlprof-wanted-grid {
		grid-template-columns: 1fr;
	}

	.owlprof-schoolfacts {
		grid-template-columns: 1fr;
	}

	.owlprof-schoolfact {
		border-right: 0;
		border-bottom: 1px solid var(--owlh-border-soft);
	}

	.owlprof-schoolfact:last-child {
		border-bottom: 0;
	}

	.owlprof-npc-grid {
		grid-template-columns: 1fr;
	}

	.owlprof-npc-full {
		grid-column: auto;
	}

}

/* =====================================================
   WEITERE CHARAKTERE IM PROFIL
   optisch passend zur Mitgliederliste
===================================================== */

/* Bereich mit den Charakterkarten */
.owlprof-attached {
	margin-top: 20px;
	padding: 18px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

/*
   Die einzelnen Karten selbst laufen nebeneinander.
   Da die Karten vom Accountswitcher direkt ausgegeben werden,
   reicht inline-flex hier zuverlässig aus.
*/
.profilcharabox {
	width: 228px;
	min-width: 228px;
	max-width: 228px;
	min-height: 0;
	max-height: none;

	margin: 6px 10px 6px 0;
	padding: 10px 10px 9px;
	box-sizing: border-box;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	vertical-align: top;

	overflow: hidden;

	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-strong);

	color: var(--owlh-text);
	text-align: center;
}


/* =====================================================
   LINK / BILD
===================================================== */

.profilcharabox > a {
	width: 100%;
	display: block;

	color: inherit;
	text-decoration: none;
}


/* Accountswitcher-Avatar */
.profilcharabox > a > img,
.profilcharabox > a > span img,
.profilcharabox img {
	width: 170px !important;
	height: 140px !important;

	margin: 0 auto;
	display: block;

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

	border: 0;
}


/* =====================================================
   CHARAKTERNAME
===================================================== */

.profilchange {
	width: 170px;
	height: 22px;

	margin: 5px auto 7px;
	display: block;

	overflow: hidden;

	color: var(--owlh-accent) !important;

	font-family: inherit !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 22px;

	letter-spacing: .08em;
	text-align: center;
	text-overflow: ellipsis;
	text-transform: uppercase !important;
	white-space: nowrap;
}


/* =====================================================
   FAKTEN
===================================================== */

.profilcharafact {
	width: 170px;
	min-height: 31px;

	margin: 3px auto 0;
	padding: 5px 6px;

	box-sizing: border-box;

	background: var(--owlh-nav-bg);
	border: 0;

	color: var(--owlh-nav-text);

	text-align: center;
}


/* kleine Überschrift */
.profilcharafact-label {
	display: block;

	color: var(--owlh-nav-muted);

	font-size: 6px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .12em;
	text-transform: uppercase;
}


/* eigentlicher Wert */
.profilcharafact-value {
	margin-top: 4px;
	display: block;

	overflow: hidden;

	color: var(--owlh-nav-text);

	font-family: Georgia, "Times New Roman", serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 1;

	text-overflow: ellipsis;
	white-space: nowrap;
}


/* =====================================================
   FALLBACK FÜR ACCOUNT-SWITCHER-MARKUP
===================================================== */

/*
   Falls {$as_profilefield} selbst noch zusätzliche
   Wrapper erzeugt, sollen sie die Kartenbreite nicht
   auseinanderziehen.
*/
.profilcharabox .as_profilefield,
.profilcharabox [class*="accountswitch"],
.profilcharabox [class*="as_profile"] {
	max-width: 170px;
}


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

@media (max-width: 600px) {

	.profilcharabox {
		width: 100%;
		min-width: 0;
		max-width: none;

		margin-right: 0;
	}

}

/* =========================================================
   PROFIL — SZENENKALENDER
========================================================= */

.szenenkalender {
	width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(270px, 310px) minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 16px 24px;

	padding: 18px 20px;

	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-soft);

	color: var(--owlh-text);
	font-size: 12px;
	line-height: 1.5;
}


/* Falls das Template weiterhin zwei .szenenkalender ineinander ausgibt */

.szenenkalender > .szenenkalender {
	display: contents;
	padding: 0;
	background: transparent;
	border: 0;
}


/* =========================================================
   MONATSKOPF
========================================================= */

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

	display: grid;
	grid-template-columns: 32px 1fr 32px;
	align-items: center;
	gap: 8px;

	padding-bottom: 13px;

	border-bottom: 1px solid var(--owlh-border-soft);

	text-align: center;
}


#kalmonat {
	color: var(--owlh-heading);

	font-family: var(--owlh-font-serif, Georgia, "Times New Roman", serif);
	font-size: 19px;
	font-weight: normal;
	font-style: italic;
	line-height: 1.2;
}


.kalbtn {
	width: 32px;
	height: 30px;

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

	box-sizing: border-box;

	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border);

	color: var(--owlh-accent) !important;

	font-family: var(--owlh-font-serif, Georgia, "Times New Roman", serif);
	font-size: 15px;
	font-weight: normal;
	line-height: 1;

	text-decoration: none !important;
}


.kalbtn:hover {
	background: var(--owlh-accent);
	border-color: var(--owlh-accent);

	color: var(--owlh-hero-text) !important;
}


/* =========================================================
   KALENDERTABELLE
========================================================= */

.kalendertabelle {
	grid-column: 1;

	width: 100%;

	border-collapse: separate;
	border-spacing: 3px;

	table-layout: fixed;

	background: transparent;

	color: var(--owlh-text);
	font-size: 12px;
}


.kalendertabelle th {
	height: 27px;

	padding: 0;

	background: transparent;
	border: 0;

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

	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;

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


.kalendertabelle td {
	position: relative;

	height: 33px;

	padding: 0;

	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);

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

	font-family: var(--owlh-font-serif, Georgia, "Times New Roman", serif);
	font-size: 12px;
	line-height: 31px;

	text-align: center;
	vertical-align: middle;
}


/* leere Felder */

.kalendertabelle td:empty {
	background: transparent;
	border-color: transparent;
}


/* Wochenende etwas zurücknehmen */

.kalendertabelle th:nth-child(6),
.kalendertabelle th:nth-child(7) {
	color: var(--owlh-accent);
}

.kalendertabelle td:nth-child(6),
.kalendertabelle td:nth-child(7) {
	background: var(--owlh-surface-soft);
}


/* Tag mit Szene */

.kalendertabelle td.highlight {
	background: var(--owlh-accent-soft) !important;
	border-color: var(--owlh-border-strong);

	color: var(--owlh-accent-hover);

	font-weight: bold;
}


.kalendertabelle td.highlight::after {
	content: "";

	position: absolute;
	left: 50%;
	bottom: 3px;

	width: 4px;
	height: 4px;

	transform: translateX(-50%) rotate(45deg);

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


/* =========================================================
   SZENENLISTE
========================================================= */

.szenenliste {
	grid-column: 2;

	min-width: 0;
	max-height: 250px !important;

	margin: 0 !important;
	padding: 0 0 0 18px !important;

	overflow-y: auto !important;
	overflow-x: hidden;

	border-left: 1px solid var(--owlh-border-soft);

	list-style: none;

	scrollbar-width: thin;
	scrollbar-color: var(--owlh-scroll-thumb) transparent;
}


.szenenliste::before {
	content: "Szenen im ausgewählten Monat";

	display: block;

	margin: 0 0 10px;
	padding: 0 0 8px;

	border-bottom: 1px solid var(--owlh-border-soft);

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

	font-size: 9px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .10em;

	text-transform: uppercase;
}


.szenenliste li {
	position: relative;

	margin: 0;
	padding: 10px 8px 10px 16px;

	border-bottom: 1px solid var(--owlh-border-soft);

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

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


.szenenliste li:last-child {
	border-bottom: 0;
}


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

	position: absolute;
	left: 1px;
	top: 16px;

	width: 6px;
	height: 6px;

	transform: rotate(45deg);

	background: var(--owlh-accent-soft);
	border: 1px solid var(--owlh-accent);
}


.szenenliste a {
	color: var(--owlh-accent);
	font-family: var(--owlh-font-serif, Georgia, "Times New Roman", serif);
	font-size: 13px;
	line-height: 1.45;

	text-decoration: none;
}


.szenenliste a:hover {
	color: var(--owlh-accent-hover);
	text-decoration: none;
}


/* Scrollbar */

.szenenliste::-webkit-scrollbar {
	width: 5px;
}

.szenenliste::-webkit-scrollbar-track {
	background: transparent;
}

.szenenliste::-webkit-scrollbar-thumb {
	background: var(--owlh-scroll-thumb);
}

.szenenliste::-webkit-scrollbar-thumb:hover {
	background: var(--owlh-scroll-hover);
}


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

@media (max-width: 700px) {

	.szenenkalender {
		grid-template-columns: 1fr;
		gap: 16px;

		padding: 15px;
	}

	.kalenderkopf,
	.kalendertabelle,
	.szenenliste {
		grid-column: 1;
	}

	.szenenliste {
		max-height: 220px !important;

		padding: 14px 0 0 !important;

		border-left: 0;
		border-top: 1px solid var(--owlh-border-soft);
	}

	#kalmonat {
		font-size: 18px;
	}

	.kalendertabelle td {
		height: 36px;
		line-height: 34px;
		font-size: 13px;
	}

	.szenenliste a {
		font-size: 13px;
	}
}