/* =========================================================
   OWLWAYS — SCHLAFSÄLE
   Komplett neuer Aufbau für quadratische Turm-Grundrisse.
   Farben ausschließlich über die vorhandenen Designvariablen.

   Platzhalter für die vier quadratischen Hintergrundbilder:
   /images/schlafsaal/gryffindor.jpg
   /images/schlafsaal/hufflepuff.jpg
   /images/schlafsaal/ravenclaw.jpg
   /images/schlafsaal/slytherin.jpg
========================================================= */

/* =========================================================
   GRUNDLAGE
========================================================= */

.dorm-page {
	width: calc(100% - 20px);
	max-width: 1120px;
	margin: 0 auto 40px;
	box-sizing: border-box;
	color: var(--fontnormal);
	font-family: inherit;
	font-size: 11px;
	line-height: 1.65;
}

.dorm-page *,
.dorm-page *::before,
.dorm-page *::after {
	box-sizing: border-box;
}

.dorm-page a {
	color: var(--link2);
	text-decoration: none;
}

.dorm-page a:hover {
	color: var(--link3);
}

.dorm-page button,
.dorm-page input {
	font: inherit;
}

.dorm-page button {
	cursor: pointer;
}

.dorm-eyebrow {
	display: block;
	margin: 0 0 3px;
	color: var(--hgdarker);
	font-size: 7px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
}


/* =========================================================
   SEITENKOPF
========================================================= */

.dorm-hero {
	margin: 0 0 12px;
	padding: 18px 20px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	background: var(--hgnormal);
	border: 1px solid var(--hggreyer);
}

.dorm-hero h1 {
	margin: 0 0 5px;
	color: var(--fonthighlight);
	font-size: 26px;
	font-weight: 300;
	line-height: 1.1;
}

.dorm-hero p {
	max-width: 720px;
	margin: 0;
	color: var(--fontkal);
	font-size: 10px;
}

.dorm-backlink {
	flex: 0 0 auto;
	padding: 7px 10px;
	border: 1px solid var(--hgdarker);
	color: var(--link2) !important;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.dorm-backlink:hover {
	background: var(--hgdarker);
	color: var(--h1font) !important;
}


/* =========================================================
   INFO + EIGENER STATUS
========================================================= */

.dorm-info,
.dorm-status {
	margin: 0 0 12px;
	padding: 12px 14px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--hglighter);
	border: 1px solid var(--hggreyer);
}

.dorm-info-mark,
.dorm-status-icon {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hgdarker);
	border-radius: 50%;
	color: var(--hgdarker);
	font-size: 9px;
	font-weight: 700;
}

.dorm-info strong,
.dorm-status strong {
	display: block;
	margin: 0 0 2px;
	color: var(--fonthighlight);
	font-size: 11px;
}

.dorm-info p,
.dorm-status p {
	margin: 0;
	color: var(--fontkal);
	font-size: 9.5px;
}

.dorm-status--assigned {
	border-left: 3px solid var(--hgdarker);
}

.dorm-status--open {
	border-left: 3px solid var(--link3);
}


/* =========================================================
   GROSSE ABSCHNITTE
========================================================= */

.dorm-unassigned,
.dorm-directory {
	margin-top: 14px;
	background: var(--hgnormal);
	border: 1px solid var(--hggreyer);
}

.dorm-section-head {
	padding: 11px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--hgdarker);
	border-bottom: 1px solid var(--hggreyer);
}

.dorm-section-head .dorm-eyebrow {
	color: var(--hglighter);
}

.dorm-section-head h2 {
	margin: 0;
	color: var(--h1font);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.dorm-section-head p {
	max-width: 470px;
	margin: 0;
	color: var(--h1font);
	font-size: 8px;
	text-align: right;
}

.dorm-count {
	min-width: 30px;
	height: 30px;
	padding: 0 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hgnormal);
	border: 1px solid var(--hggreyer);
	color: var(--fonthighlight);
	font-size: 10px;
	font-weight: 700;
}


/* =========================================================
   NOCH OHNE SCHLAFPLATZ
========================================================= */

.dorm-unassigned-grid {
	padding: 12px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

.dorm-unassigned-house {
	min-width: 0;
	background: var(--hglighter);
	border: 1px solid var(--hggreyer);
}

.dorm-unassigned-house > h3 {
	margin: 0;
	padding: 8px 10px;
	background: var(--hghighlight);
	border-bottom: 1px solid var(--hggreyer);
	color: var(--fonthighlight);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.dorm-unassigned-year {
	padding: 8px 10px;
}

.dorm-unassigned-year + .dorm-unassigned-year {
	border-top: 1px solid var(--hggreyer);
}

.dorm-unassigned-year h4 {
	margin: 0 0 4px;
	color: var(--hgdarker);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .10em;
	text-transform: uppercase;
}

.dorm-unassigned-year ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dorm-unassigned-year li {
	margin: 0;
	padding: 5px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 9px;
	border-bottom: 1px solid var(--hggreyer);
	font-size: 9.5px;
}

.dorm-unassigned-year li:last-child {
	border-bottom: 0;
}

.dorm-pick-student,
.dorm-admin-selection button,
.dorm-create-room button {
	padding: 5px 7px;
	background: var(--hgnormal);
	border: 1px solid var(--hgdarker);
	color: var(--link2);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.dorm-pick-student:hover,
.dorm-pick-student.is-selected,
.dorm-admin-selection button:hover,
.dorm-create-room button:hover {
	background: var(--hgdarker);
	color: var(--h1font);
}

.dorm-admin-hint {
	margin: 12px 12px 0;
	padding: 8px 10px;
	background: var(--hglighter);
	border-left: 2px solid var(--link3);
	color: var(--fontkal);
	font-size: 9px;
}

.dorm-admin-selection {
	position: sticky;
	z-index: 50;
	top: 8px;
	margin: 10px 12px 0;
	padding: 8px 10px;
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--hgdarker);
	border: 1px solid var(--hggreyer);
	color: var(--h1font);
	font-size: 9px;
}

.dorm-admin-selection[hidden] {
	display: none !important;
}

.dorm-admin-selection strong {
	font-size: 10px;
}

.dorm-admin-selection button {
	margin-left: auto;
	background: var(--hgnormal);
	color: var(--link2);
}


/* =========================================================
   HAUSNAVIGATION
========================================================= */

.dorm-house-tabs {
	padding: 9px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 5px;
	background: var(--hglighter);
	border-bottom: 1px solid var(--hggreyer);
}

.dorm-house-tab {
	min-height: 32px;
	padding: 7px 9px;
	background: var(--hgnormal);
	border: 1px solid var(--hggreyer);
	color: var(--fontkal);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.dorm-house-tab:hover,
.dorm-house-tab.is-active {
	background: var(--hgdarker);
	border-color: var(--hgdarker);
	color: var(--h1font);
}


/* =========================================================
   HINTERGRUNDBILDER DER VIER HÄUSER
   Nur Platzhalter: hier später die echten quadratischen Bilder eintragen.
========================================================= */

.dorm-house-gryffindor {
	--dorm-room-image: url(/images/schlafsaal/gryffindor.jpg);
}

.dorm-house-hufflepuff {
	--dorm-room-image: url(/images/schlafsaal/hufflepuff.jpg);
}

.dorm-house-ravenclaw {
	--dorm-room-image: url(/images/schlafsaal/ravenclaw.jpg);
}

.dorm-house-slytherin {
	--dorm-room-image: url(/images/schlafsaal/slytherin.jpg);
}


/* =========================================================
   HAUSPANELS
========================================================= */

.dorm-house-panel {
	display: none;
}

.dorm-house-panel.is-active {
	display: block;
}

.dorm-house-head {
	padding: 12px 14px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	background: var(--hgnormal);
	border-bottom: 1px solid var(--hggreyer);
}

.dorm-house-head h2 {
	margin: 0;
	color: var(--fonthighlight);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}

.dorm-house-head p {
	max-width: 430px;
	margin: 0;
	color: var(--fontkal);
	font-size: 9px;
	text-align: right;
}


/* =========================================================
   JAHRGANGSTABS
========================================================= */

.dorm-year-tabs {
	padding: 8px 10px;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 5px;
	background: var(--hglighter);
	border-bottom: 1px solid var(--hggreyer);
}

.dorm-year-tab {
	padding: 6px 8px;
	background: var(--hgnormal);
	border: 1px solid var(--hggreyer);
	color: var(--fontkal);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.dorm-year-tab:hover,
.dorm-year-tab.is-active {
	background: var(--hgdarker);
	border-color: var(--hgdarker);
	color: var(--h1font);
}

.dorm-year-panel {
	display: none;
	padding: 12px;
}

.dorm-year-panel.is-active {
	display: block;
}


/* =========================================================
   JUNGEN / MÄDCHEN
========================================================= */

.dorm-gender-section + .dorm-gender-section {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--hggreyer);
}

.dorm-gender-head {
	margin: 0 0 10px;
	padding: 9px 11px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--hglighter);
	border-left: 3px solid var(--link3);
}

.dorm-gender-head h3 {
	margin: 0;
	color: var(--fonthighlight);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.dorm-create-room {
	margin: 0;
}


/* =========================================================
   RAUMGRID
   Zwei quadratische Turmkacheln nebeneinander.
========================================================= */

.dorm-room-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.dorm-room {
	position: relative;
	min-width: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--hglighter);
	border: 1px solid var(--hggreyer);
}


/* =========================================================
   RAUMKOPF
   Liegt direkt auf der quadratischen Grundrisskachel.
========================================================= */

.dorm-room-head {
	position: absolute;
	z-index: 20;
	top: 10px;
	left: 10px;
	right: 10px;
	padding: 7px 9px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: var(--hgtransp);
	border: 1px solid var(--hggreyer);
}

.dorm-room-head .dorm-eyebrow {
	margin-bottom: 1px;
}

.dorm-room-head h4 {
	margin: 0;
	color: var(--fonthighlight);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.dorm-occupancy {
	flex: 0 0 auto;
	padding: 4px 6px;
	background: var(--hgnormal);
	border: 1px solid var(--hggreyer);
	color: var(--link3);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}


/* =========================================================
   GRUNDRISSBILD
   Das Bild selbst zeigt Turm, Außenmauer, Betten und Treppe.
   CSS legt nur noch die Namen/Aktionen darüber.
========================================================= */

.dorm-floorplan {
	position: absolute;
	inset: 0;
	background-color: var(--hglighter);
	background-image: var(--dorm-room-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Alte CSS-Grundrissobjekte werden nicht mehr gebraucht. */
.dorm-rug,
.dorm-door,
.dorm-bed-shape {
	display: none !important;
}


/* =========================================================
   BETTPOSITIONEN
   Die fünf Marker liegen im oberen Halbkreis entlang der Außenmauer.
   Diese Prozentwerte können später exakt an die Hintergrundgrafiken
   angepasst werden, ohne PHP oder Template zu ändern.
========================================================= */

.dorm-bed {
	position: absolute;
	z-index: 10;
	width: 22%;
	min-width: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--fontnormal);
	text-align: center;
	transform: translate(-50%, -50%);
}

.dorm-bed-pos-1 {
	left: 17%;
	top: 38%;
}

.dorm-bed-pos-2 {
	left: 31%;
	top: 23%;
}

.dorm-bed-pos-3 {
	left: 50%;
	top: 17%;
}

.dorm-bed-pos-4 {
	left: 69%;
	top: 23%;
}

.dorm-bed-pos-5 {
	left: 83%;
	top: 38%;
}

.dorm-bed-number {
	display: block;
	margin: 0 0 2px;
	color: var(--hgdarker);
	font-size: 6px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .10em;
	text-transform: uppercase;
}

.dorm-bed-person {
	margin: 0;
	color: var(--fonthighlight);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.25;
}

.dorm-bed-person a {
	color: var(--fonthighlight);
}

.dorm-bed-person a:hover {
	color: var(--link3);
}

.dorm-bed-state,
.dorm-bed-free-label,
.dorm-bed--missing > strong {
	display: block;
	margin-top: 2px;
	color: var(--fontkal);
	font-size: 6px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.dorm-bed--mine .dorm-bed-person,
.dorm-bed--mine .dorm-bed-person a,
.dorm-bed--mine .dorm-bed-state {
	color: var(--link3);
}

.dorm-bed--free {
	color: var(--fontkal);
}

.dorm-bed--missing {
	color: var(--hgdarker);
}


/* =========================================================
   AKTIONEN AM BETT
   Keine Karten: nur kleine Textbuttons unmittelbar beim Namen.
========================================================= */

.dorm-self-reserve,
.dorm-admin-assign-form,
.dorm-release-form {
	margin: 4px 0 0;
}

.dorm-self-reserve button,
.dorm-admin-assign-form button {
	padding: 3px 5px;
	background: var(--hgtransp);
	border: 1px solid var(--hgdarker);
	color: var(--link2);
	font-size: 6px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.dorm-self-reserve button:hover,
.dorm-admin-assign-form.is-compatible button:hover {
	background: var(--hgdarker);
	color: var(--h1font);
}

.dorm-admin-assign-form button:disabled {
	display: none;
}

.dorm-admin-assign-form.is-compatible button:not(:disabled) {
	display: inline-block;
}

.dorm-release-form {
	position: absolute;
	top: -4px;
	right: 0;
}

.dorm-release-form button {
	width: 18px;
	height: 18px;
	padding: 0;
	background: var(--hgtransp);
	border: 1px solid var(--hgdarker);
	color: var(--link2);
	font-size: 11px;
	line-height: 16px;
	text-align: center;
}

.dorm-release-form button:hover {
	background: var(--hgdarker);
	color: var(--h1font);
}

.dorm-page.is-admin-assigning .dorm-bed--free {
	opacity: .45;
}

.dorm-page.is-admin-assigning .dorm-bed--free:has(.dorm-admin-assign-form.is-compatible) {
	opacity: 1;
}


/* =========================================================
   LEERE BEREICHE
========================================================= */

.dorm-empty {
	padding: 18px 14px;
	background: var(--hglighter);
	border: 1px dashed var(--hggreyer);
	color: var(--fontkal);
	font-size: 9.5px;
	font-style: italic;
	text-align: center;
}


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

.dorm-page a:focus-visible,
.dorm-page button:focus-visible {
	outline: 1px solid var(--link3);
	outline-offset: 2px;
}


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

@media (max-width: 900px) {

	.dorm-room-grid {
		gap: 10px;
	}

	.dorm-bed-person {
		font-size: 9px;
	}

	.dorm-bed {
		width: 24%;
	}

}


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

@media (max-width: 700px) {

	.dorm-page {
		width: calc(100% - 12px);
	}

	.dorm-hero {
		padding: 15px;
		align-items: flex-start;
		flex-direction: column;
	}

	.dorm-hero h1 {
		font-size: 23px;
	}

	.dorm-section-head,
	.dorm-house-head,
	.dorm-gender-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.dorm-section-head p,
	.dorm-house-head p {
		max-width: none;
		text-align: left;
	}

	.dorm-unassigned-grid {
		grid-template-columns: 1fr;
	}

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

	.dorm-year-panel {
		padding: 9px;
	}

	.dorm-room-grid {
		grid-template-columns: 1fr;
	}

	.dorm-bed-person {
		font-size: 10px;
	}

	.dorm-bed {
		width: 22%;
	}

}


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

@media (max-width: 470px) {

	.dorm-page {
		width: calc(100% - 8px);
	}

	.dorm-house-tabs {
		grid-template-columns: 1fr;
	}

	.dorm-year-tab {
		flex: 1 1 calc(50% - 5px);
	}

	.dorm-room-head {
		top: 6px;
		left: 6px;
		right: 6px;
		padding: 6px 7px;
	}

	.dorm-bed {
		width: 25%;
	}

	.dorm-bed-number {
		font-size: 5px;
	}

	.dorm-bed-person {
		font-size: 8.5px;
	}

	.dorm-self-reserve button,
	.dorm-admin-assign-form button {
		font-size: 5.5px;
	}

}