.asset-kalender {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: .5rem;
	margin-top: 1rem;
}

.asset-kalender-tag {
	border: 1px solid var(--f-border, #45475a);
	border-radius: var(--abst-1);
	background: var(--f-seitenleiste, #181825);
	min-height: 6rem;
	padding: .5rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.asset-kalender-tag--heute {
	border-color: var(--f-aktiv, #89b4fa);
	box-shadow: 0 0 0 1px var(--f-aktiv, #89b4fa) inset;
}

.asset-kalender-tag--vergangen {
	opacity: .55;
}

.asset-kalender-kopf {
	display: flex;
	justify-content: space-between;
	font-size: .85em;
	font-weight: 600;
	border-bottom: 1px solid var(--f-border, #45475a);
	padding-bottom: .25rem;
	margin-bottom: .25rem;
}

.asset-kalender-wochentag {
	color: var(--f-text-schwach, #6c7086);
	font-weight: 500;
}

.asset-kalender-eintrag {
	background: color-mix(in srgb, var(--f-aktiv, #89b4fa) 18%, transparent);
	color: var(--f-aktiv, #89b4fa);
	border-radius: 3px;
	padding: .2rem .4rem;
	font-size: .8em;
	line-height: 1.3;
}

.asset-kalender-eintrag-zeit {
	display: block;
	font-weight: 600;
}

.asset-kalender-leer {
	color: var(--f-text-schwach, #6c7086);
	font-size: .8em;
	font-style: italic;
}

@media (max-width: 56.25em) {
	.asset-kalender {
		grid-template-columns: 1fr;
	}
	.asset-kalender-tag {
		min-height: auto;
	}
}

/* ----------------------------------------------------
   View Transitions (Phase 7 — Browser-Support: Chrome,
   Edge, Safari nativ; Firefox per Stable-Flag).
   ---------------------------------------------------- */

@view-transition {
	navigation: auto;
}

::view-transition-old(asset-hauptbild),
::view-transition-new(asset-hauptbild) {
	animation-duration: 220ms;
}

/* Hauptbild einer Detail-/Drilldown-Seite — animiert beim Cross-Document-
   Wechsel zwischen Standort/Gebäude/Etage/Raum/Arbeitsplatz und dem Drilldown.
   Pro Document darf die Klasse nur einmal vergeben werden. */
.asset-hauptbild {
	view-transition-name: asset-hauptbild;
}

/* ----------------------------------------------------
   Hotspot-Layer (Phase 4 — JS-Editor folgt; SVG-Layer
   wird hier formatiert)
   ---------------------------------------------------- */

.asset-hotspot-layer {
	position: relative;
	display: block;
	width: 100%;
}

.asset-hotspot-layer img {
	display: block;
	width: 100%;
	height: auto;
}

.asset-hotspot-layer svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.asset-hotspot-layer svg .hotspot {
	pointer-events: auto;
	fill: rgba(58, 132, 255, .15);
	stroke: rgba(58, 132, 255, .6);
	stroke-width: .4;
	vector-effect: non-scaling-stroke;
	transition: fill .15s ease, stroke .15s ease;
	cursor: pointer;
}

.asset-hotspot-layer svg .hotspot:hover {
	fill: rgba(58, 132, 255, .35);
	stroke: rgba(58, 132, 255, 1);
}

.asset-hotspot-layer svg .hotspot.ausgewaehlt {
	fill: rgba(250, 179, 135, .35);
	stroke: rgba(250, 179, 135, 1);
	stroke-width: .8;
}

/* Editor-Modus: bestehende Hotspots dichter füllen, damit die
   Vorbelegung über dem Hintergrundbild klar erkennbar ist. */
.asset-hotspot-layer--editor svg .hotspot {
	fill: rgba(58, 132, 255, .45);
	stroke: rgba(58, 132, 255, .9);
	stroke-width: .6;
}

.asset-hotspot-layer--editor svg .hotspot:hover {
	fill: rgba(58, 132, 255, .65);
}

.asset-hotspot-layer--editor svg .hotspot.ausgewaehlt {
	fill: rgba(250, 179, 135, .65);
	stroke: rgba(250, 179, 135, 1);
}

.asset-hotspot-layer svg .hotspot.belegt {
	fill: rgba(232, 65, 24, .25);
	stroke: rgba(232, 65, 24, .8);
}

.asset-hotspot-layer svg .hotspot.teilweise {
	fill: rgba(255, 184, 0, .25);
	stroke: rgba(255, 184, 0, .8);
}

/* Sichtbare Beschriftung in der Mitte eines Hotspot-Rechtecks. Schriftgröße in
   viewBox-Einheiten (100×100), skaliert also automatisch mit der Bildgröße.
   `paint-order: stroke fill` legt zuerst den dunklen Outline-Stroke und dann
   den weißen Fill darüber — Lesbarkeit unabhängig vom Hotspot-Hintergrund
   (frei/teilweise/belegt). `pointer-events: none` lässt Klicks zum darunter
   liegenden <rect> durch. */
.asset-hotspot-layer svg .hotspot-beschriftung {
	pointer-events: none;
	user-select: none;
	fill: #fff;
	font-size: 2.6px;
	font-weight: 600;
	text-anchor: middle;
	dominant-baseline: middle;
	paint-order: stroke fill;
	stroke: rgba(0, 0, 0, .65);
	stroke-width: .45;
}

.asset-hotspot-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: .5rem 0;
	font-size: .9em;
}

.hotspot-legende-eintrag {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.hotspot-legende-farbe {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 2px;
	border: 1px solid;
}

.hotspot-legende-frei {
	background: rgba(58, 132, 255, .15);
	border-color: rgba(58, 132, 255, .6);
}

.hotspot-legende-teilweise {
	background: rgba(255, 184, 0, .25);
	border-color: rgba(255, 184, 0, .8);
}

.hotspot-legende-belegt {
	background: rgba(232, 65, 24, .25);
	border-color: rgba(232, 65, 24, .8);
}

/* ----------------------------------------------------
   Dashboard-Widget „Schnellbuchung" — Belegungstabelle
   ----------------------------------------------------
   Layout: vier Spalten — Datum (rowspan über alle Plätze des Tages),
   Arbeitsplatz, Vormittag, Nachmittag. Skaliert auf 1–30 Tage; Scrollen
   übernimmt der widget__inhalt-Container in core/style.css. */
.widget__belegung {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}

.widget__belegung th,
.widget__belegung td {
	padding: 0.375rem var(--abst-2);
	border-bottom: 1px solid color-mix(in srgb, var(--f-border, #45475a) 40%, transparent);
	text-align: center;
	vertical-align: middle;
}

.widget__belegung tbody tr:last-child th,
.widget__belegung tbody tr:last-child td {
	border-bottom: none;
}

.widget__belegung thead th {
	font-weight: 600;
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.2;
	border-bottom: 1px solid var(--f-border, #45475a);
}

.widget__belegung-datum-kopf,
.widget__belegung-platz-kopf {
	text-align: left;
}

/* Datum-Zelle (rowspan über alle Plätze eines Tages) — Trennlinie zum
   nächsten Tag, vertikal zentriert. */
.widget__belegung-datum {
	text-align: left;
	font-weight: 600;
	color: var(--f-text, #cdd6f4);
	white-space: nowrap;
	border-right: 1px solid color-mix(in srgb, var(--f-border, #45475a) 60%, transparent);
}

/* Tag-Trenner: zwischen Tagen eine etwas stärkere obere Border. */
.widget__belegung-tag-trenner > td,
.widget__belegung-tag-trenner > th {
	border-top: 1px solid var(--f-border, #45475a);
}

/* Arbeitsplatz-Spalte — voller Name lesbar, links-bündig, kein Trunkieren. */
.widget__belegung-platz {
	text-align: left;
	font-weight: 500;
	color: var(--f-text, #cdd6f4);
	white-space: nowrap;
}

/* Belegt-Zelle — grau, kursiv, nicht klickbar. */
.widget__belegung-belegt {
	color: var(--f-text-schwach, #6c7086);
	background: color-mix(in srgb, var(--f-text-schwach, #6c7086) 10%, transparent);
	font-style: italic;
	cursor: not-allowed;
}

/* Vergangene Slots — wie belegt-Zelle, aber mit „—"-Marker statt „belegt".
   Server würde rückdatierte Buchungen ohnehin ablehnen, also gar nicht
   erst anbieten. */
.widget__belegung-vergangen {
	color: var(--f-text-schwach, #6c7086);
	background: color-mix(in srgb, var(--f-text-schwach, #6c7086) 6%, transparent);
	cursor: not-allowed;
}

/* Freie Zelle ist ein Mini-Submit-Form. */
.widget__belegung-frei {
	padding: 0;
}

.widget__belegung-frei form {
	margin: 0;
}

.widget__belegung-frei button {
	width: 100%;
	padding: 0.375rem var(--abst-2);
	border: none;
	background: color-mix(in srgb, var(--f-status-aktiv, #a6e3a1) 12%, transparent);
	color: var(--f-status-aktiv, #a6e3a1);
	font-weight: 500;
	font-size: inherit;
	cursor: pointer;
	transition: background 120ms ease;
}

.widget__belegung-frei button:hover,
.widget__belegung-frei button:focus-visible {
	background: color-mix(in srgb, var(--f-status-aktiv, #a6e3a1) 30%, transparent);
	outline: none;
}