/* Leserempfehlungen als erste Spalte des gemeinsamen Metadatenblocks.
 * Mobil stehen die Bereiche in ihrer HTML-Lesereihenfolge untereinander. */
.interior-view .room-details {
	--details-inline: 1.25rem;
	--details-block: 1.25rem;
	padding: 0;
}
.room-details > .work-facts, .room-details > .work-topics {
	margin-inline: var(--details-inline);
}
.room-details > .share-links {
	margin: 0 var(--details-inline) var(--details-block);
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
}
.reader-recommendation {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 1rem .625rem;
	background: var(--work-ui-color, #243c40);
	color: #fff;
	text-align: center;
	align-self: stretch;
}
.reader-recommendation h2 {
	margin: 0 0 1rem;
	color: inherit;
	font: 500 1rem/1.4 Bahnschrift, system-ui, sans-serif;
}
.recommendation-form button {
	min-height: 2.75rem;
	max-width: 100%;
	padding: .75rem 1rem;
	border: .125rem solid #fff;
	border-radius: .15rem .3rem 0 .3rem;
	background: #fff;
	color: var(--work-ui-color, #243c40);
	box-shadow: 0 .3rem 0 #d0d0c9, 0 .45rem .5rem #0003;
	transform: translateY(0);
	font: inherit;
	line-height: 1.4;
	cursor: pointer;
}
.recommendation-form button:hover:not(:disabled) {
	background: #fff;
	box-shadow: 0 .4rem 0 #d0d0c9, 0 .6rem .65rem #0004;
	transform: translateY(-.1rem);
}
/* Die Unterkante verschwindet beim Drücken; Fokus bleibt separat sichtbar. */
.recommendation-form button:active:not(:disabled) {
	box-shadow: 0 .05rem 0 #d0d0c9, 0 .1rem .15rem #0003;
	transform: translateY(.25rem);
}
.recommendation-form button:focus-visible {
	outline: .1875rem solid #fff;
	outline-offset: .25rem;
}
.recommendation-form button:disabled {
	cursor: default;
	background: #fff;
	color: var(--work-ui-color, #243c40);
	border-color: #fff;
	box-shadow: none;
	transform: none;
}
.recommendation-form p {
	margin: .75rem 0 0;
}
.recommendation-count {
	font-size: .9375rem;
}
.recommendation-feedback:empty {
	display: none;
}
.recommendation-feedback a {
	display: inline-block;
	min-height: 2.75rem;
	padding: .5rem .25rem;
	color: inherit;
	text-decoration: underline;
}
.recommendation-feedback a:focus-visible {
	outline: .125rem solid #fff;
	outline-offset: .125rem;
}
@media (prefers-reduced-motion: no-preference) {
	.recommendation-form button {
		transition: transform .12s ease, box-shadow .12s ease;
	}
}
@media (min-width: 36rem) {
	.interior-view .room-details {
		--details-inline: 2rem;
		--details-block: 1.5rem;
	}
}
@media (min-width: 62.01rem) {
	.room-details {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
		column-gap: 1.25rem;
		grid-template-areas:
			"recommendation facts topics"
			"recommendation facts sharing";
		align-items: start;
	}
	.room-details > .reader-recommendation {
		grid-area: recommendation;
	}
	.room-details > .work-facts {
		grid-area: facts;
		margin: 0;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		row-gap: inherit;
		align-self: stretch;
	}
	.room-details > .work-facts > div:first-child {
		margin-top: var(--details-block);
	}
	.room-details > .work-facts > div:last-child {
		margin-bottom: var(--details-block);
	}
	.room-details > .work-topics {
		grid-area: topics;
		min-width: 0;
		margin: var(--details-block) var(--details-inline) 0 0;
	}
	.room-details > .share-links {
		grid-area: sharing;
		min-width: 0;
		margin: 0 var(--details-inline) var(--details-block) 0;
		padding-top: 0;
		border-top: 0;
		align-items: flex-start;
	}
	@supports (grid-template-rows: subgrid) {
		.room-details > .work-facts {
			grid-template-rows: subgrid;
		}
	}
}
@media print {
	.reader-recommendation {
		display: none;
	}
}