/**
 * Fallback box shown in place of a YouTube video that the Usercentrics consent
 * manager has blocked. Fonts are inherited from the theme (Hausschrift); the
 * CTA reuses the Goodlayers .gdlr-core-button class so it picks up the site's
 * brand button styling automatically.
 */
.fuchs-video-consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 16 / 9; /* Keep the video slot's shape. */
	min-height: 180px;
	padding: 24px;
	text-align: center;
	background: #f2f2f2;
	border: 1px solid #e0e0e0;
}

/* Older browsers without aspect-ratio support still get a sensible height. */
@supports not ( aspect-ratio: 16 / 9 ) {
	.fuchs-video-consent {
		height: 360px;
	}
}

.fuchs-video-consent__text {
	margin: 0;
	max-width: 42ch;
	font-size: 16px;
	line-height: 1.5;
}

/*
 * Match the site's solid buttons: white text on house orange, black on hover.
 * Structure (padding, font) comes from the .gdlr-core-button base class.
 *
 * The `.gdlr-core-body` prefix is required: the theme's default button colour
 * (.gdlr-core-body .gdlr-core-button, grey #2f2f2f) has two-class specificity
 * and loads after this file, so an unprefixed `.fuchs-…__btn.…-solid` only
 * ties and loses. The site's own buttons dodge this with per-#id inline CSS;
 * this box has no id, so it needs the extra class to win the cascade.
 */
.fuchs-video-consent__btn {
	cursor: pointer;
}

.gdlr-core-body .fuchs-video-consent__btn.gdlr-core-button-solid {
	color: #ffffff;
	background: #ea6607;
	transition: background-color 0.2s ease;
	border: 0;
}

.gdlr-core-body .fuchs-video-consent__btn.gdlr-core-button-solid:hover,
.gdlr-core-body .fuchs-video-consent__btn.gdlr-core-button-solid:focus {
	color: #ffffff;
	background-color: #000000;
}

.fuchs-video-consent__link {
	font-size: 14px;
	text-decoration: underline;
}