/* =========================================================
   STUNDENPLAN
   Vollansicht + eingebettete Indexansicht
   ========================================================= */

:root {

	/* -----------------------------------------------------
	   GLOBALE DESIGNFARBEN
	   identisch zum restlichen Design
	----------------------------------------------------- */

	--sidebit-bg: #0a0809;
	--sidebit-bg-deep: #070607;
	--sidebit-bg-soft: #0e0b0c;

	--sidebit-panel: #100c0e;
	--sidebit-panel-raised: #151013;
	--sidebit-panel-hover: #1b1316;

	--sidebit-text: #c6babe;
	--sidebit-text-soft: #96898e;
	--sidebit-text-muted: #685c61;
	--sidebit-text-strong: #eee5e8;

	--sidebit-accent-dark: #4e1019;
	--sidebit-accent: #741b2a;
	--sidebit-accent-medium: #92283a;
	--sidebit-accent-light: #b64356;
	--sidebit-accent-pale: #ce7180;

	--sidebit-transparent: transparent;

	--sidebit-line:
		rgba(194, 150, 161, 0.11);

	--sidebit-line-strong:
		rgba(194, 150, 161, 0.22);

	--sidebit-line-accent:
		rgba(182, 67, 86, 0.42);

	--sidebit-wash:
		rgba(116, 27, 42, 0.08);

	--sidebit-wash-medium:
		rgba(116, 27, 42, 0.12);

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

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

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

	--sidebit-black:
		rgba(0, 0, 0, 0.42);


	/* -----------------------------------------------------
	   STUNDENPLAN
	----------------------------------------------------- */

	--sp-font:
		"Inter",
		Arial,
		sans-serif;

	--sp-display:
		"Cormorant Garamond",
		Georgia,
		serif;

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

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

	--sp-cell:
		var(--sidebit-panel);

	--sp-cell-alt:
		var(--sidebit-bg-soft);

	--sp-head:
		var(--sidebit-panel-raised);

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

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

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

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

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

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

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

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

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

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


	/* -----------------------------------------------------
	   MAHLZEITEN
	----------------------------------------------------- */

	--sp-meal-bg:
		rgba(116, 27, 42, 0.11);

	--sp-meal-line:
		rgba(182, 67, 86, 0.34);

	--sp-meal-text:
		#d8c6cb;


	/* -----------------------------------------------------
	   LEHRERKREIS
	----------------------------------------------------- */

	--sp-teacher-bg:
		#681622;

	--sp-teacher-border:
		rgba(206, 113, 128, 0.4);

	--sp-teacher-text:
		#f2e8eb;


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

	--sp-header-gradient:
		linear-gradient(
			to right,
			rgba(116, 27, 42, 0.15),
			rgba(116, 27, 42, 0.035) 58%,
			rgba(116, 27, 42, 0)
		);

	--sp-title-line:
		linear-gradient(
			to right,
			rgba(182, 67, 86, 0),
			rgba(182, 67, 86, 0.52),
			rgba(182, 67, 86, 0)
		);


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

	--sp-shadow:
		0 18px 46px rgba(0, 0, 0, 0.22);

	--sp-teacher-shadow:
		0 5px 14px rgba(0, 0, 0, 0.28);


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

	--sp-width: 1380px;
}


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

.sp-table,
.sp-table *,
.sp-index-overview,
.sp-index-overview * {
	box-sizing: border-box;
}


/* =========================================================
   VOLLSTÄNDIGER STUNDENPLAN
   ========================================================= */

.sp-table {
	width: 100%;

	margin: 28px auto;

	color: var(--sp-text);

	font-family: var(--sp-font);
	font-size: 14px;
	line-height: 1.55;

	background: var(--sp-bg);

	border-collapse: separate;
	border-spacing: 0;

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

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


/* =========================================================
   TABELLENKOPF
   ========================================================= */

.sp-table th {
	position: relative;

	padding: 14px 10px;

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

	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.45;

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

	background:
		var(--sp-header-gradient),
		var(--sp-head);

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


.sp-table th:last-child {
	border-right: 0;
}


/* kleine rote Linie unter dem Tabellenkopf */

.sp-table thead {
	position: relative;
}


.sp-table thead::after {
	display: table-row;

	height: 1px;

	content: "";

	background: var(--sp-title-line);
}


/* =========================================================
   ALLGEMEINE ZELLEN
   ========================================================= */

.sp-table td {
	position: relative;

	padding: 9px 8px;

	color: var(--sp-text);

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

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

	background: var(--sp-cell);

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


.sp-table tr td:last-child {
	border-right: 0;
}


.sp-table tbody tr:last-child td {
	border-bottom: 0;
}


/* =========================================================
   UNTERRICHTSZELLEN
   ========================================================= */

.sp-td {
	position: relative;

	width: 12.5%;
	height: 64px;

	padding:
		11px
		9px
		10px;

	color: var(--sp-text);

	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;

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

	background: var(--sp-cell);
}


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

.sp-table td:first-child {
	width: 92px;

	padding-right: 10px;
	padding-left: 10px;

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

	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;

	text-align: center;

	background:
		var(--sp-header-gradient),
		var(--sp-bg-deep);

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


/* =========================================================
   MAHLZEITEN
   ========================================================= */

.sp-meal {
	color: var(--sp-meal-text) !important;

	font-weight: 600;

	background:
		var(--sp-meal-bg) !important;

	border-top:
		1px solid
		var(--sp-meal-line) !important;

	border-bottom:
		1px solid
		var(--sp-meal-line) !important;
}


/* falls Mahlzeit über mehrere Zellen läuft */

.sp-meal:first-child {
	border-left:
		2px solid
		var(--sp-accent-dark);
}


.sp-meal:last-child {
	border-right:
		2px solid
		var(--sp-accent-dark);
}


/* =========================================================
   LEHRERKREIS
   ========================================================= */

.sp-teacher-circle {
	position: absolute;

	top: 6px;
	right: 6px;

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

	width: 25px;
	height: 25px;

	color: var(--sp-teacher-text);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;

	text-align: center;

	background: var(--sp-teacher-bg);

	border:
		1px solid
		var(--sp-teacher-border);

	border-radius: 50%;

	box-shadow: var(--sp-teacher-shadow);

	cursor: default;
}


/* =========================================================
   PARALLELKLASSEN
   ========================================================= */

.sp-parallel-classes {
	display: block;

	margin-top: 5px;

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

	font-size: 11px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
}


/* =========================================================
   INDEX-STUNDENPLAN
   ========================================================= */

.sp-index-overview {
	position: relative;

	width: min(
		calc(100% - 50px),
		var(--sp-width)
	);

	margin: 32px auto;

	color: var(--sp-text);

	font-family: var(--sp-font);
	font-size: 14px;

	background: var(--sp-bg);

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

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


/* feiner roter Einschnitt */

.sp-index-overview::before {
	position: absolute;
	z-index: 3;

	top: -1px;
	left: 38px;

	width: 92px;
	height: 1px;

	content: "";

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


/* =========================================================
   INDEX-TITEL
   ========================================================= */

.sp-index-title {
	position: relative;

	margin: 0;
	padding:
		24px
		28px
		21px;

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

	font-family: var(--sp-display);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.1;

	background:
		var(--sp-header-gradient),
		var(--sp-bg-deep);

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


/* kleines Label über dem eigentlichen Titel */

.sp-index-title::before {
	display: block;

	margin-bottom: 5px;

	content: "HOGWARTS · WOCHENPLAN";

	color: var(--sp-accent);

	font-family: var(--sp-font);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.4;

	text-transform: uppercase;
}


/* =========================================================
   INDEX-TABELLE
   ========================================================= */

.sp-index-table {
	width: 100%;

	color: var(--sp-text);

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

	table-layout: fixed;

	border-collapse: separate;
	border-spacing: 0;
}


.sp-index-table th,
.sp-index-table td {
	position: relative;

	padding: 10px 8px;

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

	word-break: normal;
	overflow-wrap: break-word;

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

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


.sp-index-table th:last-child,
.sp-index-table td:last-child {
	border-right: 0;
}


.sp-index-table tbody tr:last-child td {
	border-bottom: 0;
}


/* =========================================================
   INDEX-TABELLENKOPF
   ========================================================= */

.sp-index-table th {
	padding-top: 13px;
	padding-bottom: 13px;

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

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

	text-transform: uppercase;

	background:
		var(--sp-header-gradient),
		var(--sp-head);
}


/* =========================================================
   INDEX-UHRZEIT
   ========================================================= */

.sp-index-table td:first-child {
	width: 82px;

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

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

	background:
		var(--sp-header-gradient),
		var(--sp-bg-deep);

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


/* =========================================================
   INDEX-MAHLZEIT
   ========================================================= */

.sp-index-meal {
	color: var(--sp-meal-text) !important;

	font-weight: 600;

	background:
		var(--sp-meal-bg) !important;

	border-top:
		1px solid
		var(--sp-meal-line) !important;

	border-bottom:
		1px solid
		var(--sp-meal-line) !important;
}


/* =========================================================
   INDEX-LEHRERKREIS
   ========================================================= */

.sp-index-teacher-circle {
	position: absolute;

	top: 5px;
	right: 5px;

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

	width: 23px;
	height: 23px;

	color: var(--sp-teacher-text);

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

	background: var(--sp-teacher-bg);

	border:
		1px solid
		var(--sp-teacher-border);

	border-radius: 50%;

	box-shadow: var(--sp-teacher-shadow);

	cursor: default;
}


/* =========================================================
   INDEX-PARALLELKLASSEN
   ========================================================= */

.sp-index-parallel-classes {
	display: block;

	margin-top: 5px;

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

	font-size: 10px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
}


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

@media (max-width: 1050px) {

	.sp-index-overview {
		width: calc(100% - 36px);
	}


	.sp-index-title {
		padding:
			22px
			24px
			20px;

		font-size: 28px;
	}


	.sp-table {
		font-size: 13px;
	}


	.sp-table td,
	.sp-td {
		font-size: 12px;
	}


	.sp-index-table {
		font-size: 12px;
	}


	.sp-teacher-circle,
	.sp-index-teacher-circle {
		width: 23px;
		height: 23px;

		font-size: 9px;
	}
}


/* =========================================================
   MOBILE
   Tabellen werden NICHT winzig gequetscht.
   Stattdessen horizontal scrollbar.
   ========================================================= */

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

	/* -----------------------------------------------------
	   VOLLER STUNDENPLAN
	----------------------------------------------------- */

	.sp-table {
		display: block;

		width: 100%;
		min-width: 0;

		margin: 24px 0;

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

		font-size: 16px;

		scrollbar-width: thin;
		scrollbar-color:
			var(--sp-accent-dark)
			var(--sp-bg-deep);
	}


	.sp-table thead,
	.sp-table tbody {
		display: table;

		width: 940px;
		min-width: 940px;

		table-layout: fixed;
	}


	.sp-table th {
		padding:
			14px
			10px;

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


	.sp-table td,
	.sp-td {
		padding:
			12px
			10px;

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


	.sp-td {
		height: 76px;
	}


	.sp-table td:first-child {
		width: 105px;

		font-size: 13px;
	}


	.sp-parallel-classes {
		margin-top: 6px;

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


	.sp-teacher-circle {
		top: 7px;
		right: 7px;

		width: 28px;
		height: 28px;

		font-size: 11px;
	}


	/* -----------------------------------------------------
	   INDEX
	----------------------------------------------------- */

	.sp-index-overview {
		width: calc(100% - 36px);

		margin:
			28px
			auto
			32px;

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

		scrollbar-width: thin;
		scrollbar-color:
			var(--sp-accent-dark)
			var(--sp-bg-deep);
	}


	.sp-index-title {
		position: sticky;
		z-index: 5;
		left: 0;

		width: 100vw;
		min-width: 100%;

		padding:
			22px
			20px
			20px;

		font-size: 31px;
		line-height: 1.08;
	}


	.sp-index-title::before {
		font-size: 11px;
		letter-spacing: 0.17em;
	}


	/*
	 * Die Tabelle darf breiter als das Handy sein.
	 * Das ist absichtlich so:
	 * Lesbarkeit vor "alles irgendwie auf 360px pressen".
	 */

	.sp-index-table {
		width: 920px;
		min-width: 920px;

		font-size: 15px;

		table-layout: fixed;
	}


	.sp-index-table th {
		padding:
			13px
			10px;

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


	.sp-index-table td {
		padding:
			12px
			10px;

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


	.sp-index-table td:first-child {
		width: 100px;

		font-size: 13px;
	}


	.sp-index-parallel-classes {
		margin-top: 6px;

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


	.sp-index-teacher-circle {
		top: 7px;
		right: 7px;

		width: 28px;
		height: 28px;

		font-size: 11px;
	}
}


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

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

	.sp-index-overview {
		width: calc(100% - 28px);
	}


	.sp-index-title {
		padding:
			20px
			17px
			18px;

		font-size: 29px;
	}


	.sp-index-title::before {
		font-size: 11px;
	}


	.sp-index-table,
	.sp-table thead,
	.sp-table tbody {
		width: 900px;
		min-width: 900px;
	}


	.sp-index-table th,
	.sp-table th {
		font-size: 13px;
	}


	.sp-index-table td,
	.sp-table td,
	.sp-td {
		font-size: 15px;
		line-height: 1.62;
	}


	.sp-index-parallel-classes,
	.sp-parallel-classes {
		font-size: 13px;
	}


	.sp-teacher-circle,
	.sp-index-teacher-circle {
		width: 29px;
		height: 29px;

		font-size: 11px;
	}
}