/* =========================================================
   OWLWAYS — STUNDENPLAN
   Herbstdesign
   Vollständig auf --owlh-* Variablen aufgebaut.

   WICHTIG:
   Das Popup nutzt :target.
   .closepopstund liegt als unsichtbare, klickbare Fläche
   HINTER .popstund über dem gesamten Viewport.
   Dadurch schließt ein Klick außerhalb des Stundenplans
   zuverlässig das Popup – ganz ohne JavaScript.
========================================================= */


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

.stundenplan-headergrid,
.stundenplan-headergrid *,
.infopopstund,
.infopopstund *,
.stundenplan-overview,
.stundenplan-overview * {
	box-sizing: border-box;
}


/* =========================================================
   SCHULINFORMATIONEN – INDEX / FORUMBIT
========================================================= */

.stundenplan-headergrid {
	position: relative;

	width: 100%;
	padding: 16px 18px;

	display: grid;
	grid-template-columns: minmax(115px, .7fr) minmax(0, 4fr) minmax(115px, .7fr);
	align-items: center;
	gap: 16px;

	background: var(--owlh-surface);

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


.stundenplan-action,
.stundenplan-points {
	min-width: 0;
}


.stundenplan-action {
	text-align: center;
}


.stundenplan-points {
	position: relative;
	z-index: 0;

	text-align: center;
}


/* Hauspunkte ausdrücklich im normalen Stack halten. */

.stundenplan-points .owlhp-grid,
.stundenplan-points .owlhp-house {
	position: relative;
	z-index: 0 !important;
}


/* =========================================================
   HAUSPUNKTE-TITEL
========================================================= */

.stundenplantitle {
	position: relative;

	margin: 0 0 11px;
	padding: 0 0 8px;

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

	font-family: var(--owlh-font-serif);
	font-size: 17px;
	font-weight: normal;
	font-style: italic;
	line-height: 1.25;

	text-align: center;
}


.stundenplantitle::after {
	content: "";

	position: absolute;
	left: 50%;
	bottom: 0;

	width: 36px;
	height: 1px;

	transform: translateX(-50%);

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


/* =========================================================
   AKTIONSKARTEN
========================================================= */

.stundenplan-headergrid .kullera {
	min-height: 96px;

	padding: 10px 8px;

	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	gap: 7px;

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

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

	font-family: var(--owlh-font-body);
	font-size: 8px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .055em;

	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
}


.stundenplan-headergrid .kullera:hover {
	background: var(--owlh-accent-soft);
	border-color: var(--owlh-border-strong);

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


.stundenplan-headergrid .radius30 {
	width: 38px !important;
	height: 38px !important;

	margin: 0 auto !important;
	padding: 0 !important;

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

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

	color: var(--owlh-accent);

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


.stundenplan-headergrid .kullera:hover .radius30 {
	background: var(--owlh-surface-raised);
	border-color: var(--owlh-accent);
}


.stundenplan-headergrid .menuea {
	display: block;
	color: inherit;
}


/* =========================================================
   INFOPOP – GESCHLOSSEN
========================================================= */

.infopopstund {
	position: fixed !important;
	z-index: 2147483000 !important;

	inset: 0 !important;

	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;

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

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

	background: transparent;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	isolation: isolate;

	transition:
		opacity .18s ease,
		visibility .18s ease;
}


/* =========================================================
   INFOPOP – GEÖFFNET
========================================================= */

.infopopstund:target {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* =========================================================
   KLICKFLÄCHE AUSSERHALB DES STUNDENPLANS
========================================================= */

/*
   Dieser Link bedeckt den gesamten Bildschirm.
   Er liegt ÜBER der Seite und den Hauspunkten,
   aber UNTER dem eigentlichen Stundenplanfenster.

   href="#" entfernt #stundenplan aus der URL und
   beendet dadurch automatisch den :target-Zustand.
*/

.closepopstund {
	position: absolute;
	z-index: 1;

	inset: 0;

	display: block;

	background: var(--owlh-overlay);

	cursor: default;

	text-decoration: none !important;
}


/*
   Sichtbares X oben rechts.
   Auch dieses gehört zur großen Schließen-Fläche.
*/

.closepopstund::after {
	content: "×";

	position: fixed;
	z-index: 2;

	top: 32px;
	right: 32px;

	width: 32px;
	height: 32px;

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

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

	color: var(--owlh-accent);

	font-family: Arial, sans-serif;
	font-size: 20px;
	font-weight: normal;
	line-height: 1;

	box-shadow: 0 5px 16px var(--owlh-shadow-deep);

	cursor: pointer;
}


.closepopstund:hover::after {
	background: var(--owlh-accent-soft);
	border-color: var(--owlh-border-strong);

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


/* =========================================================
   DAS EIGENTLICHE POPUPFENSTER
========================================================= */

.popstund {
	position: relative;
	z-index: 10;

	width: min(1180px, calc(100vw - 48px));
	max-width: 1180px;

	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);

	overflow: hidden;

	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-strong);
	box-shadow: 0 20px 60px var(--owlh-shadow-deep);

	color: var(--owlh-text);

	text-align: left;
}


/*
   Wichtig:
   Das Fenster selbst liegt über .closepopstund.
   Klicks innerhalb des Stundenplans treffen daher NICHT
   die Schließen-Fläche.
*/

.popstund::before {
	content: "Stundenplan";

	position: sticky;
	z-index: 30;
	top: 0;

	height: 40px;

	padding: 11px 54px 10px 17px;

	display: block;

	background: var(--owlh-nav-bg);
	border-bottom: 1px solid var(--owlh-border-strong);

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

	font-size: 8px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .13em;

	text-transform: uppercase;
}


/* =========================================================
   SCROLLCONTAINER IM POPUP
========================================================= */

.popstund-scroll {
	width: 100%;

	max-height: calc(100vh - 88px);
	max-height: calc(100dvh - 88px);

	padding: 18px;

	overflow: auto;

	overscroll-behavior: contain;

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


.popstund-scroll::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}


.popstund-scroll::-webkit-scrollbar-track {
	background: var(--owlh-scroll-track);
}


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


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


/* =========================================================
   STUNDENPLAN-INHALT
========================================================= */

.stundenplan-overview {
	width: 100%;

	color: var(--owlh-text);

	font-family: var(--owlh-font-body);
	font-size: 11px;
	line-height: 1.45;
}


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


.stundenplan-overview a:hover {
	color: var(--owlh-accent-hover);
}


/* =========================================================
   STUNDENPLAN-TITEL IM POPUP
========================================================= */

.stundenplan-overview > h3 {
	position: relative;

	margin: 0 0 15px;
	padding: 0 0 9px;

	color: var(--owlh-accent);

	font-family: var(--owlh-font-serif);
	font-size: 23px;
	font-weight: normal;
	font-style: italic;
	line-height: 1.2;

	text-align: left;
}


.stundenplan-overview > h3::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: 0;

	width: 46px;
	height: 1px;

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


/* persönlicher Stundenplan */

.popstund-scroll > .stundenplantitle {
	margin-bottom: 16px;

	font-size: 20px;

	text-align: left;
}


.popstund-scroll > .stundenplantitle::after {
	left: 0;
	transform: none;
}


/* =========================================================
   TABELLE
========================================================= */

.sp-table {
	width: 100%;
	min-width: 940px;

	margin: 0;

	border: 1px solid var(--owlh-border);
	border-collapse: separate;
	border-spacing: 0;

	background: var(--owlh-surface);

	table-layout: fixed;

	color: var(--owlh-text);

	font-size: 10px;
	line-height: 1.4;
}


/* =========================================================
   WOCHENTAGE
========================================================= */

.sp-table th {
	position: sticky;
	z-index: 5;
	top: 0;

	height: 38px;

	padding: 8px 6px;

	background: var(--owlh-nav-bg);
	border-right: 1px solid var(--owlh-border-strong);
	border-bottom: 1px solid var(--owlh-border-strong);

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

	font-size: 8px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .075em;

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


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


/* =========================================================
   UHRZEIT
========================================================= */

.sp-table th:first-child,
.sp-table td:first-child {
	width: 84px;
	min-width: 84px;
	max-width: 84px;
}


.sp-table th:first-child {
	z-index: 9;
	left: 0;
}


.sp-table td:first-child {
	position: sticky;
	z-index: 4;
	left: 0;

	padding: 8px 6px;

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

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

	font-size: 8px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .045em;

	text-align: center;

	white-space: nowrap;
}


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

.sp-table td.sp-td {
	height: 62px;

	padding: 5px;

	vertical-align: middle;

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

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

	text-align: center;
}


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


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


/* Wochenende */

.sp-table th:nth-child(7),
.sp-table th:nth-child(8) {
	color: var(--owlh-nav-muted);
}


.sp-table td:nth-child(7),
.sp-table td:nth-child(8) {
	background: var(--owlh-surface-soft);
}


/* =========================================================
   UNTERRICHTSBLOCK
========================================================= */

.sp-parallel-block {
	position: relative;

	min-height: 42px;

	padding: 7px 26px 7px 7px;

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

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

	color: var(--owlh-text);

	font-family: var(--owlh-font-serif);
	font-size: 11px;
	font-weight: normal;
	line-height: 1.35;

	text-align: center;
}


/* =========================================================
   LEHRER-BADGE
========================================================= */

.sp-teacher-circle {
	position: absolute;
	right: 4px;
	top: 4px;

	width: 21px;
	height: 21px;

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

	background: var(--owlh-accent-soft);
	border: 1px solid var(--owlh-border-strong);
	border-radius: 50%;

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

	font-family: var(--owlh-font-body);
	font-size: 6.5px;
	font-weight: 700;
	line-height: 1;

	cursor: help;
}


/* =========================================================
   MAHLZEIT
========================================================= */

.sp-table td.sp-meal {
	background: var(--owlh-selected-bg);
}


.sp-table td.sp-meal .sp-parallel-block {
	background: var(--owlh-selected-bg);
	border-color: var(--owlh-selected-border);

	color: var(--owlh-gold);

	font-family: var(--owlh-font-body);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .07em;

	text-transform: uppercase;
}


/* =========================================================
   LESEHILFE
========================================================= */

.sp-table tbody tr:hover td.sp-td {
	border-bottom-color: var(--owlh-border-strong);
}


.sp-table tbody tr:hover td:first-child {
	color: var(--owlh-accent);
}


/* =========================================================
   STACKING-SCHUTZ
   Hauspunkte oder Forumbit dürfen das Popup nicht überdecken.
========================================================= */

.owlf-special-embed {
	position: relative;
	z-index: auto !important;

	overflow: visible !important;
}


.owlf-special-embed .owlhp-grid,
.owlf-special-embed .owlhp-house {
	z-index: 0 !important;
}


.infopopstund {
	z-index: 2147483000 !important;
}


.infopopstund .closepopstund {
	z-index: 1 !important;
}


.infopopstund .popstund {
	z-index: 10 !important;
}


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

@media (max-width: 900px) {

	.stundenplan-headergrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.stundenplan-points {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.stundenplan-action:first-child {
		grid-column: 1;
		grid-row: 2;
	}

	.stundenplan-action:last-child {
		grid-column: 2;
		grid-row: 2;
	}

	.stundenplan-headergrid .kullera {
		min-height: 76px;
	}

	.infopopstund {
		padding: 15px !important;
	}

	.popstund {
		width: calc(100vw - 30px);

		max-height: calc(100dvh - 30px);
	}

	.popstund-scroll {
		max-height: calc(100dvh - 70px);

		padding: 14px;
	}

	.closepopstund::after {
		top: 23px;
		right: 23px;
	}

	.sp-table {
		min-width: 880px;
	}

}


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

@media (max-width: 650px) {

	.stundenplan-headergrid {
		padding: 12px;

		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.stundenplan-headergrid .kullera {
		min-height: 68px;

		padding: 8px 6px;

		font-size: 9px;
	}

	.stundenplan-headergrid .radius30 {
		width: 32px !important;
		height: 32px !important;

		font-size: 11px;
	}

	.infopopstund {
		padding: 6px !important;
	}

	.popstund {
		width: calc(100vw - 12px);
		max-width: none;

		max-height: calc(100dvh - 12px);
	}

	.popstund::before {
		height: 37px;

		padding: 10px 47px 9px 13px;
	}

	.popstund-scroll {
		max-height: calc(100dvh - 49px);

		padding: 11px;
	}

	.closepopstund::after {
		top: 12px;
		right: 12px;

		width: 29px;
		height: 29px;
	}

	.stundenplan-overview > h3 {
		font-size: 20px;
	}

	.sp-table {
		min-width: 820px;

		font-size: 9.5px;
	}

	.sp-table th:first-child,
	.sp-table td:first-child {
		width: 72px;
		min-width: 72px;
		max-width: 72px;
	}

	.sp-table td.sp-td {
		height: 58px;
		padding: 4px;
	}

	.sp-parallel-block {
		min-height: 39px;

		padding: 6px 24px 6px 5px;

		font-size: 10px;
	}

	.sp-teacher-circle {
		width: 19px;
		height: 19px;

		font-size: 6px;
	}

}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 420px) {

	.stundenplan-headergrid {
		grid-template-columns: 1fr;
	}

	.stundenplan-points,
	.stundenplan-action:first-child,
	.stundenplan-action:last-child {
		grid-column: 1;
	}

	.stundenplan-points {
		grid-row: 1;
	}

	.stundenplan-action:first-child {
		grid-row: 2;
	}

	.stundenplan-action:last-child {
		grid-row: 3;
	}

	.stundenplan-headergrid .kullera {
		min-height: 58px;

		flex-direction: row;

		text-align: left;
	}

	.stundenplan-headergrid .radius30 {
		margin: 0 !important;

		flex: 0 0 auto;
	}

}

/* =========================================================
   OWLWAYS — STUNDENPLAN IM USERPROFIL
   Kompakte Variante für die schmalere Profilspalte.

   Anwendung:
   Den vorhandenen Stundenplan im Profil lediglich in

   <div class="stundenplan-profile">
       {$stundenplan}
   </div>

   einschließen.

   Das große Stundenplan-Popup auf dem Index wird davon NICHT verändert.
========================================================= */


/* =========================================================
   WRAPPER
========================================================= */

.stundenplan-profile {
	width: 100%;
	max-width: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;

	color: var(--owlh-text);

	font-family: var(--owlh-font-body);
}


/* Falls der Stundenplan innerhalb einer Tabellenzelle steckt,
   darf er diese nicht künstlich verbreitern. */
.stundenplan-profile,
.stundenplan-profile .stundenplan-overview,
.stundenplan-profile .stundenplan-overview * {
	box-sizing: border-box;
	min-width: 0;
}


/* =========================================================
   ÜBERSICHT
========================================================= */

.stundenplan-profile .stundenplan-overview {
	width: 100%;
	max-width: 100%;

	margin: 0;

	overflow-x: auto;
	overflow-y: visible;

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


.stundenplan-profile .stundenplan-overview::-webkit-scrollbar {
	height: 5px;
}


.stundenplan-profile .stundenplan-overview::-webkit-scrollbar-track {
	background: var(--owlh-scroll-track);
}


.stundenplan-profile .stundenplan-overview::-webkit-scrollbar-thumb {
	background: var(--owlh-scroll-thumb);
}


/* =========================================================
   JAHRGANGSTITEL
========================================================= */

.stundenplan-profile .stundenplan-overview > h3 {
	position: relative;

	margin: 0 0 9px;
	padding: 0 0 6px;

	color: var(--owlh-accent);

	font-family: var(--owlh-font-serif);
	font-size: 16px;
	font-weight: normal;
	font-style: italic;
	line-height: 1.2;

	text-align: left;
}


.stundenplan-profile .stundenplan-overview > h3::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: 0;

	width: 32px;
	height: 1px;

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


/* =========================================================
   KOMPAKTE TABELLE
========================================================= */

.stundenplan-profile .sp-table {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;

	margin: 0;

	border: 1px solid var(--owlh-border);
	border-collapse: separate;
	border-spacing: 0;

	table-layout: fixed;

	background: var(--owlh-surface);

	color: var(--owlh-text);

	font-size: 8px;
	line-height: 1.2;
}


/* =========================================================
   WOCHENTAGE
========================================================= */

.stundenplan-profile .sp-table th {
	position: static;

	height: 26px;

	padding: 4px 2px;

	background: var(--owlh-nav-bg);
	border-right: 1px solid var(--owlh-border-strong);
	border-bottom: 1px solid var(--owlh-border-strong);

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

	font-size: 9px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .035em;

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

	white-space: nowrap;
}


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


/* =========================================================
   UHRZEITSPALTE
========================================================= */

.stundenplan-profile .sp-table th:first-child,
.stundenplan-profile .sp-table td:first-child {
	width: 50px !important;
	min-width: 50px !important;
	max-width: 50px !important;
}


.stundenplan-profile .sp-table td:first-child {
	position: static;

	padding: 4px 2px;

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

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

	font-size: 6.5px;
	font-weight: 700;
	line-height: 1.15;

	text-align: center;

	white-space: normal;
}


/* Uhrzeit platzsparender: "8 - 8.50" etc. bleibt umbrechbar. */
.stundenplan-profile .sp-table td:first-child {
	overflow-wrap: anywhere;
}


/* =========================================================
   FACHZELLEN
========================================================= */

.stundenplan-profile .sp-table td.sp-td {
	height: 39px;

	padding: 2px;

	vertical-align: middle;

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

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

	text-align: center;

	overflow: hidden;
}


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


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


/* Wochenende etwas zurücknehmen */
.stundenplan-profile .sp-table th:nth-child(7),
.stundenplan-profile .sp-table th:nth-child(8) {
	color: var(--owlh-nav-muted);
}


.stundenplan-profile .sp-table td:nth-child(7),
.stundenplan-profile .sp-table td:nth-child(8) {
	background: var(--owlh-surface-soft);
}


/* =========================================================
   UNTERRICHTSBLOCK
========================================================= */

.stundenplan-profile .sp-parallel-block {
	position: relative;

	width: 100%;
	min-height: 30px;

	padding: 4px 17px 4px 3px;

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

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

	color: var(--owlh-text);

	font-family: var(--owlh-font-body);
	font-size: 7.5px;
	font-weight: normal;
	line-height: 1.15;

	text-align: center;

	overflow-wrap: anywhere;
	hyphens: auto;
}


/* =========================================================
   LEHRERKÜRZEL
========================================================= */

.stundenplan-profile .sp-teacher-circle {
	position: absolute;

	top: 2px;
	right: 2px;

	width: 14px;
	height: 14px;

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

	background: var(--owlh-accent-soft);
	border: 1px solid var(--owlh-border-strong);
	border-radius: 50%;

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

	font-family: var(--owlh-font-body);
	font-size: 5px;
	font-weight: 700;
	line-height: 1;

	cursor: help;
}


/* =========================================================
   MITTAGSPAUSE
========================================================= */

.stundenplan-profile .sp-table td.sp-meal {
	background: var(--owlh-selected-bg);
}


.stundenplan-profile .sp-table td.sp-meal .sp-parallel-block {
	background: var(--owlh-selected-bg);
	border-color: var(--owlh-selected-border);

	color: var(--owlh-gold);

	font-size: 6.5px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .025em;

	text-transform: uppercase;
}


/* =========================================================
   LEERE ZELLEN
========================================================= */

.stundenplan-profile .sp-table td.sp-td:empty {
	background: var(--owlh-surface-soft);
}


/* =========================================================
   OPTIONAL: PERSÖNLICHER TITEL DIREKT VOR DER ÜBERSICHT
========================================================= */

.stundenplan-profile > .stundenplantitle {
	margin: 0 0 8px;
	padding: 0 0 6px;

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

	font-family: var(--owlh-font-serif);
	font-size: 15px;
	font-weight: normal;
	font-style: italic;
	line-height: 1.25;

	text-align: left;
}


.stundenplan-profile > .stundenplantitle::after {
	left: 0;
	width: 30px;

	transform: none;
}


/* =========================================================
   SCHMALE PROFILBEREICHE
   Erst hier bekommt die Tabelle eine kleine Mindestbreite
   und scrollt innerhalb ihres eigenen Wrappers, statt die
   Profiltabelle auseinanderzudrücken.
========================================================= */

@media (max-width: 720px) {

	.stundenplan-profile .sp-table {
		min-width: 620px !important;
	}

	.stundenplan-profile .stundenplan-overview {
		padding-bottom: 4px;
	}

}


/* =========================================================
   SEHR SCHMALE ANSICHT
========================================================= */

@media (max-width: 480px) {

	.stundenplan-profile .sp-table {
		min-width: 560px !important;
	}

	.stundenplan-profile .sp-table td.sp-td {
		height: 36px;
	}

	.stundenplan-profile .sp-parallel-block {
		min-height: 27px;

		font-size: 9px;
	}

}

/* =========================================================
   OWLWAYS — STUNDENPLANÜBERSICHT
   Für stundenplan.php
   Funktioniert mit hellem und dunklem Herbst-Root.
========================================================= */


/* =========================================================
   NAVIGATION OBEN
========================================================= */

.sp-nav {
	margin: 18px 0 20px;
	padding: 5px;

	display: inline-flex;
	align-items: center;
	gap: 5px;

	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border-soft);
	box-shadow: 0 4px 12px var(--owlh-shadow);
}

.sp-nav a {
	min-width: 105px;
	padding: 8px 14px;

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

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

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

	font-family: var(--owlh-font-body);
	font-size: 8px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .08em;

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

	text-transform: uppercase;
}

.sp-nav a:hover {
	background: var(--owlh-accent-soft);
	border-color: var(--owlh-border-strong);

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


/* =========================================================
   ZURÜCK-LINK
========================================================= */

.sp-back {
	margin: 0 0 12px;
}

.sp-back a {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	padding: 6px 9px;

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

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

	text-decoration: none;

	text-transform: uppercase;
}

.sp-back a:hover {
	color: var(--owlh-accent);
}


/* =========================================================
   BEREICHSTITEL / SCHULE
========================================================= */

.sp-section-title {
	position: relative;

	margin: 0 0 13px;
	padding: 0 0 10px;

	color: var(--owlh-accent);

	font-family: var(--owlh-font-serif);
	font-size: 24px;
	font-weight: normal;
	font-style: italic;
	line-height: 1.2;

	text-align: left;
}

.sp-section-title::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: 0;

	width: 48px;
	height: 1px;

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


/* =========================================================
   JAHRGANGS-GRID
========================================================= */

.sp-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 9px;

	margin: 0 0 22px;
}


/* =========================================================
   JAHRGANGS-KARTE
========================================================= */

.sp-select-card {
	position: relative;

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

	padding: 16px 14px 14px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;

	overflow: hidden;

	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
	box-shadow: 0 4px 13px var(--owlh-shadow);

	color: var(--owlh-text);

	text-decoration: none !important;
}

.sp-select-card::before {
	content: "";

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

	width: 3px;
	height: 100%;

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

.sp-select-card::after {
	content: "";

	position: absolute;
	right: -30px;
	top: -38px;

	width: 110px;
	height: 110px;

	transform: rotate(45deg);

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

	opacity: .18;

	pointer-events: none;
}

.sp-select-card:hover {
	background: var(--owlh-surface-raised);
	border-color: var(--owlh-border-strong);

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


/* =========================================================
   KARTENTITEL
========================================================= */

.sp-select-title {
	position: relative;
	z-index: 1;

	margin: 0 0 5px;

	color: var(--owlh-accent);

	font-family: var(--owlh-font-serif);
	font-size: 18px;
	font-weight: normal;
	font-style: italic;
	line-height: 1.2;
}


/* =========================================================
   KARTEN-UNTERTITEL
========================================================= */

.sp-select-subtitle {
	position: relative;
	z-index: 1;

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

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

	text-transform: uppercase;
}

.sp-select-subtitle::after {
	content: " →";
	color: var(--owlh-accent);
}

.sp-select-card:hover .sp-select-title {
	color: var(--owlh-accent-hover);
}

.sp-select-card:hover .sp-select-subtitle {
	color: var(--owlh-text-soft);
}


/* =========================================================
   FOKUS
========================================================= */

.sp-nav a:focus-visible,
.sp-back a:focus-visible,
.sp-select-card:focus-visible {
	outline: 2px solid var(--owlh-accent);
	outline-offset: 2px;
}


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

@media (max-width: 900px) {

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

}


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

@media (max-width: 650px) {

	.sp-nav {
		width: 100%;

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

	.sp-nav a {
		min-width: 0;
		width: 100%;
	}

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

	.sp-select-card {
		min-height: 95px;
	}

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 420px) {

	.sp-grid {
		grid-template-columns: 1fr;
	}

	.sp-select-card {
		min-height: 82px;
	}

	.sp-section-title {
		font-size: 21px;
	}

}

/* =========================================================
   STUNDENPLAN.PHP — DETAILANSICHT / LEHRERSTUNDENPLAN
   Ergänzung zur bestehenden Stundenplan-CSS
========================================================= */


/* =========================================================
   LEHRER-/DETAILKARTE
========================================================= */

.sp-card {
	margin: 0 0 14px;

	overflow: hidden;

	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
	box-shadow: 0 5px 16px var(--owlh-shadow);
}


.sp-card-header {
	padding: 16px 18px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;

	background: var(--owlh-surface-raised);
}


.sp-card-header > div:first-child {
	min-width: 0;
	flex: 1 1 auto;
}


/* =========================================================
   LEHRERNAME
========================================================= */

.sp-card-title {
	position: relative;

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

	color: var(--owlh-accent);

	font-family: var(--owlh-font-serif);
	font-size: 22px;
	font-weight: normal;
	font-style: italic;
	line-height: 1.15;
}


.sp-card-title::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: 0;

	width: 38px;
	height: 1px;

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


/* =========================================================
   LEHRER-META
========================================================= */

.sp-card-subtitle {
	margin: 3px 0;

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

	font-size: 8px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .06em;

	text-transform: uppercase;
}


/* =========================================================
   VERGLEICHSAUSWAHL
========================================================= */

.sp-compare-inline {
	min-width: 260px;

	padding: 9px 10px;

	display: flex;
	align-items: center;
	gap: 9px;

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


.sp-compare-inline-label {
	flex: 0 0 auto;

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

	font-size: 9px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .09em;

	text-transform: uppercase;
}


.sp-compare-select {
	width: 230px;
	max-width: 100%;

	background-color: var(--owlh-surface-raised) !important;
	border-color: var(--owlh-border) !important;

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

	font-size: 9px !important;
}


/* =========================================================
   TABELLENWRAPPER
========================================================= */

.sp-table-wrapper {
	position: relative;

	width: 100%;
	max-width: 100%;

	margin: 0 0 24px;

	overflow: auto;

	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
	box-shadow: 0 6px 18px var(--owlh-shadow);

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


.sp-table-wrapper::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}


.sp-table-wrapper::-webkit-scrollbar-track {
	background: var(--owlh-scroll-track);
}


.sp-table-wrapper::-webkit-scrollbar-thumb {
	background: var(--owlh-scroll-thumb);
}


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


/* =========================================================
   TABELLE IN DER ALLGEMEINEN ÜBERSICHT
========================================================= */

.sp-table-wrapper > .sp-table {
	width: 100% !important;
	min-width: 860px !important;

	margin: 0;

	background: var(--owlh-surface);

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

	table-layout: fixed;

	color: var(--owlh-text);

	font-size: 9px;
	line-height: 1.4;
}


/* =========================================================
   WOCHENTAGE
========================================================= */

.sp-table-wrapper > .sp-table th {
	position: sticky;
	z-index: 5;
	top: 0;

	height: 42px;

	padding: 8px 6px;

	background: var(--owlh-nav-bg);
	border: 0;
	border-right: 1px solid var(--owlh-border-strong);
	border-bottom: 1px solid var(--owlh-border-strong);

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

	font-family: var(--owlh-font-body);
	font-size: 9px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .08em;

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


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


/* =========================================================
   NORMALE TABELLENZELLEN
========================================================= */

.sp-table-wrapper > .sp-table tbody td {
	min-width: 0;
	height: 68px;

	padding: 8px 8px;

	vertical-align: top;

	background: var(--owlh-surface-raised);

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

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

	text-align: left;

	overflow-wrap: anywhere;
}


.sp-table-wrapper > .sp-table tbody td:last-child {
	border-right: 0;
}


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


/* =========================================================
   UHRZEIT
========================================================= */

.sp-table-wrapper > .sp-table .sp-time {
	width: 78px !important;
	min-width: 78px !important;
	max-width: 78px !important;
}


.sp-table-wrapper > .sp-table th.sp-time {
	z-index: 10;
	left: 0;
}


.sp-table-wrapper > .sp-table td.sp-time {
	position: sticky;
	z-index: 4;
	left: 0;

	padding: 10px 5px;

	background: var(--owlh-surface-soft);

	border-right: 1px solid var(--owlh-border);
	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: .025em;

	text-align: center;

	white-space: nowrap;
}


/* =========================================================
   WOCHENENDE
========================================================= */

.sp-table-wrapper > .sp-table th:nth-child(7),
.sp-table-wrapper > .sp-table th:nth-child(8) {
	color: var(--owlh-nav-muted);
}


.sp-table-wrapper > .sp-table tbody td:nth-child(7),
.sp-table-wrapper > .sp-table tbody td:nth-child(8) {
	background: var(--owlh-surface-soft);
}


/* =========================================================
   FACHINHALT
========================================================= */

.sp-table-wrapper .sp-cell-meta {
	color: var(--owlh-text-muted);

	font-size: 10px;
	font-weight: normal;
	line-height: 1.35;
}


.sp-table-wrapper .sp-cell-fach {
	margin: 2px 0;

	color: var(--owlh-accent);

	font-family: var(--owlh-font-serif);
	font-size: 13px;
	font-weight: normal;
	font-style: italic;
	line-height: 1.25;
}


/*
   Mehrere Einträge innerhalb derselben Stunde werden durch
   die vorhandenen <br>-Elemente voneinander getrennt.
*/

.sp-table-wrapper td > br {
	content: "";

	display: block;

	height: 1px;

	margin: 7px 0;

	background: var(--owlh-border-soft);
}


.sp-table-wrapper td > br:last-child {
	display: none;
}


/* =========================================================
   LEERE ZELLEN
========================================================= */

.sp-table-wrapper > .sp-table tbody td:not(.sp-time):not(:has(.sp-cell-fach)) {
	background: var(--owlh-surface-soft);
}


/* Wochenende + leer noch etwas zurückhaltender */

.sp-table-wrapper > .sp-table tbody td:nth-child(7):not(:has(.sp-cell-fach)),
.sp-table-wrapper > .sp-table tbody td:nth-child(8):not(:has(.sp-cell-fach)) {
	background: var(--owlh-surface-deep);
	opacity: .75;
}


/* =========================================================
   ZEILEN-HOVER ALS LESEHILFE
========================================================= */

.sp-table-wrapper > .sp-table tbody tr:hover td:not(.sp-time) {
	background: var(--owlh-surface);
}


.sp-table-wrapper > .sp-table tbody tr:hover td.sp-time {
	color: var(--owlh-accent);
}


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

@media (max-width: 850px) {

	.sp-card-header {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}


	.sp-compare-inline {
		width: 100%;
		min-width: 0;

		justify-content: space-between;
	}


	.sp-compare-select {
		width: min(320px, 65%);
	}


	.sp-table-wrapper > .sp-table {
		min-width: 820px !important;
	}

}


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

@media (max-width: 550px) {

	.sp-card-header {
		padding: 14px;
	}


	.sp-card-title {
		font-size: 19px;
	}


	.sp-compare-inline {
		align-items: stretch;
		flex-direction: column;
	}


	.sp-compare-select {
		width: 100%;
	}


	.sp-table-wrapper > .sp-table {
		min-width: 760px !important;
	}


	.sp-table-wrapper > .sp-table tbody td {
		padding: 6px;
	}


	.sp-table-wrapper .sp-cell-fach {
		font-size: 10px;
	}

}

/* =========================================================
   STUNDENPLAN.PHP — SCHÜLER / KLASSENSTUNDENPLAN
   Korrigiert die Darstellung der .sp-parallel-blocks
   innerhalb der allgemeinen Stundenplanübersicht.
========================================================= */


/* =========================================================
   PARALLELBLOCK IN DER GROSSEN ÜBERSICHT
========================================================= */

.sp-table-wrapper .sp-parallel-block {
	position: relative;

	width: 100%;
	min-height: 0;

	margin: 0 0 6px;
	padding: 8px 7px;

	/* ganz wichtig:
	   Fach, Lehrer und Parallelklassen wieder UNTEREINANDER */
	display: block;

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

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

	font-family: var(--owlh-font-body);
	font-size: 8px;
	line-height: 1.35;

	text-align: left;

	overflow: hidden;
}


.sp-table-wrapper .sp-parallel-block:last-child {
	margin-bottom: 0;
}


/* mehrere Kurse in derselben Stunde optisch voneinander trennen */

.sp-table-wrapper .sp-parallel-block + .sp-parallel-block {
	margin-top: 5px;
}


/* =========================================================
   FACH
========================================================= */

.sp-table-wrapper .sp-parallel-block .sp-cell-fach {
	margin: 0 0 5px;
	padding: 0 0 4px;

	display: block;

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

	color: var(--owlh-accent);

	font-family: var(--owlh-font-serif);
	font-size: 12px;
	font-weight: normal;
	font-style: italic;
	line-height: 1.2;

	text-align: left;

	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}


/* =========================================================
   LEHRER
========================================================= */

.sp-table-wrapper .sp-parallel-block .sp-cell-meta {
	margin: 0 0 3px;

	display: block;

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

	font-size: 9px;
	font-weight: normal;
	line-height: 1.35;

	text-align: left;
}


/* kleines visuelles Label vor Lehrerangaben */

.sp-table-wrapper .sp-parallel-block .sp-cell-meta::before {
	content: "Lehrer · ";

	color: var(--owlh-gold);

	font-size: 6px;
	font-weight: 700;
	letter-spacing: .04em;

	text-transform: uppercase;
}


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

.sp-table-wrapper .sp-cell-parallel {
	display: block;

	margin-top: 4px;
	padding-top: 4px;

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

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

	font-size: 9px !important;
	line-height: 1.35;

	text-align: left;

	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}


/* "Parallel mit" etwas hervorheben, ohne das Markup ändern zu müssen */

.sp-table-wrapper .sp-cell-parallel {
	color: var(--owlh-text-soft);
}


/* =========================================================
   TABELLENZELLEN DER SCHÜLERANSICHT
========================================================= */

.sp-table-wrapper > .sp-table tbody td:not(.sp-time) {
	padding: 8px;

	vertical-align: top;
}


/*
   Durch die vielen Informationen brauchen die Schülerspalten
   etwas mehr Platz als die Lehreransicht.
*/

.sp-table-wrapper > .sp-table {
	min-width: 1040px !important;
}


/* =========================================================
   LEERE ZELLEN
========================================================= */

.sp-table-wrapper > .sp-table tbody td:not(.sp-time):not(:has(.sp-parallel-block)):not(:has(.sp-cell-fach)) {
	background: var(--owlh-surface-soft);
}


/* =========================================================
   MEHRERE FÄCHER IN EINER STUNDE
========================================================= */

.sp-table-wrapper td > .sp-parallel-block:first-of-type {
	margin-top: 0;
}


/*
   Das &nbsp; vor den Blöcken stammt aus der Ausgabe.
   Es darf keinen sichtbaren zusätzlichen Abstand erzeugen.
*/

.sp-table-wrapper td {
	font-size: 0;
}

.sp-table-wrapper td .sp-parallel-block,
.sp-table-wrapper td .sp-cell-meta,
.sp-table-wrapper td .sp-cell-fach,
.sp-table-wrapper td .sp-cell-parallel {
	font-size: initial;
}


/*
   Danach die gewünschten Schriftgrößen erneut explizit setzen,
   damit "initial" nicht die typografische Hierarchie überschreibt.
*/

.sp-table-wrapper .sp-parallel-block {
	font-size: 8px;
}

.sp-table-wrapper .sp-parallel-block .sp-cell-fach {
	font-size: 12px;
}

.sp-table-wrapper .sp-parallel-block .sp-cell-meta {
	font-size: 9px;
}

.sp-table-wrapper .sp-cell-parallel {
	font-size: 9px;
}

.sp-table-wrapper td.sp-time {
	font-size: 9px;
}


/* =========================================================
   HOVER
========================================================= */

.sp-table-wrapper .sp-parallel-block:hover {
	background: var(--owlh-surface-raised);
	border-color: var(--owlh-border-strong);
}


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

@media (max-width: 850px) {

	.sp-table-wrapper > .sp-table {
		min-width: 980px !important;
	}

}


@media (max-width: 550px) {

	.sp-table-wrapper > .sp-table {
		min-width: 900px !important;
	}

	.sp-table-wrapper .sp-parallel-block {
		padding: 6px;
	}

	.sp-table-wrapper .sp-parallel-block .sp-cell-fach {
		font-size: 11px;
	}

}

/* =========================================================
   INDEX-POPUP — SCROLL FIX
   Funktioniert sowohl mit .popstund-scroll als auch mit dem
   älteren direkten <div style="overflow:auto;"> im Template.
========================================================= */

.infopopstund .popstund {
	display: flex;
	flex-direction: column;

	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);

	overflow: hidden;
}


/* eigentlicher Scrollbereich */
.infopopstund .popstund-scroll,
.infopopstund .popstund > div {
	width: 100%;
	max-width: 100%;
	min-width: 0;

	/* Resthöhe unter der 40px-Kopfleiste */
	max-height: calc(100vh - 88px);
	max-height: calc(100dvh - 88px);

	padding: 18px;

	flex: 1 1 auto;

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

	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;

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


/* horizontal breite Tabellen dürfen wirklich breiter bleiben */
.infopopstund .popstund .sp-table {
	flex-shrink: 0;
}


/* auch Wrapper im Stundenplan nicht abschneiden */
.infopopstund .sp-table-wrapper {
	width: 100%;
	max-width: 100%;

	overflow-x: auto !important;
	overflow-y: visible;
}


/* Scrollbar */
.infopopstund .popstund-scroll::-webkit-scrollbar,
.infopopstund .popstund > div::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

.infopopstund .popstund-scroll::-webkit-scrollbar-track,
.infopopstund .popstund > div::-webkit-scrollbar-track {
	background: var(--owlh-scroll-track);
}

.infopopstund .popstund-scroll::-webkit-scrollbar-thumb,
.infopopstund .popstund > div::-webkit-scrollbar-thumb {
	background: var(--owlh-scroll-thumb);
}

.infopopstund .popstund-scroll::-webkit-scrollbar-thumb:hover,
.infopopstund .popstund > div::-webkit-scrollbar-thumb:hover {
	background: var(--owlh-scroll-hover);
}


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

@media (max-width: 900px) {

	.infopopstund .popstund {
		max-height: calc(100dvh - 30px);
	}

	.infopopstund .popstund-scroll,
	.infopopstund .popstund > div {
		max-height: calc(100dvh - 70px);
		padding: 14px;
	}

}


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

@media (max-width: 650px) {

	.infopopstund .popstund {
		max-height: calc(100dvh - 12px);
	}

	.infopopstund .popstund-scroll,
	.infopopstund .popstund > div {
		max-height: calc(100dvh - 49px);
		padding: 11px;
	}

}