/* =========================================================
   OWLWAYS — SCHLAFSÄLE
   Herbstdesign / quadratische Schlafsaal-Grundrisse
   Nutzt ausschließlich die --owlh-* Variablen des Themes.

   Hintergrundbilder:
   Gryffindor  -> /images/gryffturm.png
   Hufflepuff  -> /images/huffraum.png
   Ravenclaw   -> /images/raventurm.png
   Slytherin   -> /images/slythraum.png

   Passe nur die Dateinamen unten an, falls du andere verwendest.
========================================================= */


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

.dorm-page {
	width: calc(100% - 20px);
	max-width: 1120px;
	margin: 0 auto 40px;
	box-sizing: border-box;

	color: var(--owlh-text);

	font-family: var(--owlh-font-body);
	font-size: 12px;
	line-height: 1.65;
}

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

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

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

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

.dorm-page button {
	cursor: pointer;
}

.dorm-eyebrow {
	display: block;
	margin: 0 0 3px;

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

	font-size: 7px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
}


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

.dorm-hero {
	margin: 0 0 12px;
	padding: 20px 22px;

	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;

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

.dorm-hero h1 {
	margin: 0 0 5px;

	color: var(--owlh-heading);

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

.dorm-hero p {
	max-width: 720px;
	margin: 0;

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

	font-size: 10.5px;
}

.dorm-backlink {
	flex: 0 0 auto;
	padding: 7px 10px;

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

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

	font-size: 7px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.dorm-backlink:hover {
	background: var(--owlh-nav-bg);
	border-color: var(--owlh-nav-bg);

	color: var(--owlh-nav-text) !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(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
	border-radius: var(--owlh-radius);
}

.dorm-info-mark,
.dorm-status-icon {
	width: 29px;
	height: 29px;
	flex: 0 0 29px;

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

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

	color: var(--owlh-accent);

	font-size: 9px;
	font-weight: 700;
}

.dorm-info strong,
.dorm-status strong {
	display: block;
	margin: 0 0 2px;

	color: var(--owlh-heading);

	font-size: 11px;
}

.dorm-info p,
.dorm-status p {
	margin: 0;

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

	font-size: 9.5px;
}

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

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


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

.dorm-unassigned,
.dorm-directory {
	margin-top: 14px;

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

.dorm-section-head {
	padding: 12px 15px;

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

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

.dorm-section-head .dorm-eyebrow {
	color: var(--owlh-nav-muted);
}

.dorm-section-head h2 {
	margin: 0;

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

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

.dorm-section-head p {
	max-width: 470px;
	margin: 0;

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

	font-size: 8.5px;
	text-align: right;
}

.dorm-count {
	min-width: 31px;
	height: 31px;
	padding: 0 7px;

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

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

	color: var(--owlh-heading);

	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(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-soft);
}

.dorm-unassigned-house > h3 {
	margin: 0;
	padding: 8px 10px;

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

	color: var(--owlh-heading);

	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(--owlh-border-soft);
}

.dorm-unassigned-year h4 {
	margin: 0 0 4px;

	color: var(--owlh-accent);

	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(--owlh-border-soft);

	color: var(--owlh-text);

	font-size: 9.5px;
}

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


/* =========================================================
   BUTTONS / ADMIN
========================================================= */

.dorm-pick-student,
.dorm-admin-selection button,
.dorm-create-room button {
	padding: 5px 7px;

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

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

	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(--owlh-nav-bg);
	border-color: var(--owlh-nav-bg);

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

.dorm-admin-hint {
	margin: 12px 12px 0;
	padding: 8px 10px;

	background: var(--owlh-info-bg);
	border: 1px solid var(--owlh-info-border);
	border-left: 3px solid var(--owlh-accent);

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

	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(--owlh-nav-bg);
	border: 1px solid var(--owlh-border-strong);
	box-shadow: 0 6px 18px var(--owlh-shadow-deep);

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

	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(--owlh-surface-raised);
	border-color: var(--owlh-border-strong);

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


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

.dorm-house-tabs {
	padding: 9px;

	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 5px;

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

.dorm-house-tab {
	min-height: 32px;
	padding: 7px 9px;

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

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

	font-size: 7px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.dorm-house-tab:hover {
	background: var(--owlh-accent-soft);
	border-color: var(--owlh-border-strong);

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

.dorm-house-tab.is-active {
	background: var(--owlh-nav-bg);
	border-color: var(--owlh-nav-bg);

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


/* =========================================================
   HINTERGRUNDBILDER DER VIER HÄUSER
========================================================= */

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

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

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

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


/* =========================================================
   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(--owlh-surface-raised);
	border-bottom: 1px solid var(--owlh-border);
}

.dorm-house-head h2 {
	margin: 0;

	color: var(--owlh-heading);

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

.dorm-house-head p {
	max-width: 430px;
	margin: 0;

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

	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(--owlh-surface-soft);
	border-bottom: 1px solid var(--owlh-border);
}

.dorm-year-tab {
	padding: 6px 8px;

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

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

	font-size: 7px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.dorm-year-tab:hover {
	background: var(--owlh-accent-soft);
	border-color: var(--owlh-border-strong);

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

.dorm-year-tab.is-active {
	background: var(--owlh-nav-bg);
	border-color: var(--owlh-nav-bg);

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

.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(--owlh-border);
}

.dorm-gender-head {
	margin: 0 0 10px;
	padding: 9px 11px;

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

	background: var(--owlh-surface-soft);
	border-left: 3px solid var(--owlh-accent);
}

.dorm-gender-head .dorm-eyebrow {
	color: var(--owlh-text-muted);
}

.dorm-gender-head h3 {
	margin: 0;

	color: var(--owlh-heading);

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

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


/* =========================================================
   RAUMGRID
   Zwei quadratische Schlafsäle 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(--owlh-surface-soft);
	border: 1px solid var(--owlh-border);
	border-radius: var(--owlh-radius);
	box-shadow: 0 4px 14px var(--owlh-shadow);
}


/* =========================================================
   RAUMKOPF
========================================================= */

.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(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-strong);
	box-shadow: 0 3px 10px var(--owlh-shadow);
}

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

.dorm-room-head h4 {
	margin: 0;

	color: var(--owlh-heading);

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

.dorm-occupancy {
	flex: 0 0 auto;

	padding: 4px 6px;

	background: var(--owlh-selected-bg);
	border: 1px solid var(--owlh-selected-border);

	color: var(--owlh-heading);

	font-size: 7px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}


/* =========================================================
   GRUNDRISSBILD
========================================================= */

.dorm-floorplan {
	position: absolute;
	inset: 0;

	background-color: var(--owlh-surface-soft);
	background-image: var(--dorm-room-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Die Raumgestaltung befindet sich vollständig im Hintergrundbild. */
.dorm-rug,
.dorm-door,
.dorm-bed-shape {
	display: none !important;
}


/* =========================================================
   BETTPOSITIONEN
   Die fünf Beschriftungen liegen im Halbkreis.
========================================================= */

.dorm-bed {
	position: absolute;
	z-index: 10;

	width: 24%;
	min-width: 0;
	padding: 0;

	background: none;
	border: 0;

	color: var(--owlh-text);

	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%;
}


/* =========================================================
   BESCHRIFTUNGEN AUF DEM BILD
========================================================= */

.dorm-bed-number {
	display: inline-block;

	margin: 0 0 2px;
	padding: 2px 5px;

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

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

	font-size: 6px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .10em;
	text-transform: uppercase;
}

.dorm-bed-person,
.dorm-bed-free-label,
.dorm-bed--missing > strong {
	display: block;

	width: 100%;
	margin: 0;
	padding: 4px 6px;

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

	color: var(--owlh-heading);

	box-shadow: 0 2px 8px var(--owlh-shadow);
}

.dorm-bed--occupied .dorm-bed-person,
.dorm-bed--mine .dorm-bed-person,
.dorm-bed--missing > strong {
	padding-right: 28px;
}

.dorm-bed-person {
	font-size: 10px;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

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

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

.dorm-bed-state {
	display: inline-block;

	margin-top: 2px;
	padding: 2px 5px;

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

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

	font-size: 6px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.dorm-bed-free-label,
.dorm-bed--missing > strong {
	font-size: 9px;
	font-weight: 700;
	line-height: 1.25;
}

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

.dorm-bed--mine .dorm-bed-person {
	background: var(--owlh-selected-bg);
	border-color: var(--owlh-selected-border);
}

.dorm-bed--free {
	color: var(--owlh-text-soft);
}

.dorm-bed--missing {
	color: var(--owlh-text-muted);
}


/* =========================================================
   AKTIONEN AM BETT
========================================================= */

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

.dorm-self-reserve button,
.dorm-admin-assign-form button {
	padding: 3px 5px;

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

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

	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(--owlh-nav-bg);
	border-color: var(--owlh-nav-bg);

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

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

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


/* Löschen-X mit eigener fester Fläche – überlappt lange Namen nicht. */
.dorm-release-form {
	position: absolute;
	z-index: 5;

	top: 21px;
	right: 4px;

	margin: 0;
}

.dorm-release-form button {
	width: 20px;
	height: 20px;
	padding: 0;

	background: var(--owlh-error-bg);
	border: 1px solid var(--owlh-error-border);

	color: var(--owlh-error);

	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

.dorm-release-form button:hover {
	background: var(--owlh-error);
	border-color: var(--owlh-error);

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

.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(--owlh-surface-soft);
	border: 1px dashed var(--owlh-border-strong);

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

	font-size: 9.5px;
	font-style: italic;
	text-align: center;
}


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

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


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

@media (max-width: 900px) {

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

	.dorm-bed {
		width: 24%;
	}

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

}


/* =========================================================
   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 {
		width: 22%;
	}

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

}


/* =========================================================
   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;
	}

}