/* -------------------------------------------------------------------------
 * Video-Header
 * Vollbild-Video mit Punktraster, eingeblendetem Wappen, Titel
 * und animiertem Scroll-Symbol.
 * ---------------------------------------------------------------------- */

.dd-hero {
	position: relative;

	/* Ausbruch aus dem Bootstrap-Container.
	   --dd-hero-vw wird per JS auf die tatsaechliche Fensterbreite
	   ohne Scrollbalken gesetzt; 100vw ist nur der Rueckfallwert. */
	width: var(--dd-hero-vw, 100vw);
	max-width: var(--dd-hero-vw, 100vw);
	margin-left: calc(50% - var(--dd-hero-vw, 100vw) / 2);
	margin-right: calc(50% - var(--dd-hero-vw, 100vw) / 2);

	/* Fuellt exakt den Rest des Fensters. --dd-hero-top wird per JS auf
	   den tatsaechlichen Abstand zur Fensteroberkante gesetzt. */
	height: calc(
		var(--dd-hero-height-fallback, 100vh) - var(--dd-hero-top, 0px)
	);
	height: calc(var(--dd-hero-height, 100svh) - var(--dd-hero-top, 0px));

	min-height: 420px;
	overflow: hidden;
	background-color: #2b2b2b;

	/* Das Posterbild liegt als Hintergrund unter dem Video. Sobald das
	   Video durchgelaufen ist, blendet es sich aus und gibt das Bild frei. */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* --- Video ------------------------------------------------------------ */

.dd-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border: 0;
	transition: opacity 1.2s ease;
}

/* Nach dem letzten Bild bleibt das Posterbild stehen. */
.dd-hero--ended .dd-hero__video {
	opacity: 0;
}

.dd-hero__video--still {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* --- Punktraster ------------------------------------------------------ */

.dd-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(
		circle at 0 0,
		rgba(0, 0, 0, var(--dd-hero-dots, 0.3)) 1px,
		transparent 1px
	);
	background-size: 2px 2px;
}

/* --- Inhalt ----------------------------------------------------------- */

.dd-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 6vw;
	text-align: center;
	color: #fff;
}

.dd-hero__crest {
	display: block;
	width: clamp(80px, 8vw, 130px);
	height: auto;
	margin: 0 0 clamp(18px, 2.5vw, 34px);
}

.dd-hero__title,
.dd-hero__subtitle {
	margin: 0;
	color: #fff;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.35;
	text-wrap: balance;
}

.dd-hero__title {
	font-size: clamp(15px, 2.1vw, 34px);
	letter-spacing: 0.18em;
	/* Der letzte Buchstabe soll die optische Mitte nicht verschieben. */
	text-indent: 0.18em;
}

.dd-hero__subtitle {
	margin-top: clamp(10px, 1.6vw, 24px);
	font-size: clamp(11px, 1.2vw, 19px);
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	opacity: 0.92;
}

/* --- Scroll-Symbol ---------------------------------------------------- */

.dd-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: clamp(24px, 5vh, 64px);
	transform: translateX(-50%);
	display: block;
	padding: 12px;
	background: none;
	border: 0;
	cursor: pointer;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
}

.dd-hero__scroll img {
	display: block;
	width: clamp(20px, 1.7vw, 30px);
	height: auto;
}

.dd-hero__scroll:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 4px;
}

/* Nur fuer Screenreader */
.dd-hero .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Bewegung --------------------------------------------------------- */

@keyframes dd-hero-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Titel und Untertitel kommen von links hereingefahren. */
@keyframes dd-hero-in-left {
	from {
		opacity: 0;
		transform: translateX(-60px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Eigene Keyframes fuer das Scroll-Symbol: die waagerechte Zentrierung
   steckt ebenfalls in transform und darf nicht ueberschrieben werden. */
@keyframes dd-hero-in-centered {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%);
	}
}

@keyframes dd-hero-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

.dd-hero__crest {
	opacity: 0;
	animation: dd-hero-in 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s both;
}

.dd-hero__title,
.dd-hero__subtitle {
	opacity: 0;
	animation: dd-hero-in-left 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.dd-hero__title {
	animation-delay: 0.6s;
}
.dd-hero__subtitle {
	animation-delay: 0.9s;
}

/* Das Symbol blendet ein und wippt danach dauerhaft. */
.dd-hero__scroll {
	opacity: 0;
	animation: dd-hero-in-centered 1s cubic-bezier(0.22, 0.61, 0.36, 1) 1.4s both;
}

.dd-hero__scroll img {
	animation: dd-hero-bounce 2.4s ease-in-out 2.4s infinite;
}

/* --- Hochformat und schmale Fenster ----------------------------------- */

@media (max-width: 782px) {
	.dd-hero {
		min-height: 380px;
	}

	.dd-hero__content {
		/* Auf dem Handy sitzt der Text etwas oberhalb der Mitte,
		   damit er nicht auf der Treppe des Gebaeudes liegt. */
		justify-content: flex-start;
		padding-top: 26vh;
	}

	.dd-hero__title {
		letter-spacing: 0.14em;
		text-indent: 0.14em;
	}

	.dd-hero__subtitle {
		letter-spacing: 0.22em;
		text-indent: 0.22em;
	}
}

/* Kuerzere Einflugstrecke auf schmalen Fenstern. */
@media (max-width: 600px) {
	@keyframes dd-hero-in-left {
		from {
			opacity: 0;
			transform: translateX(-28px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}

@media (max-width: 480px) {
	.dd-hero__content {
		padding-top: 22vh;
	}
}

/* --- Reduzierte Bewegung ---------------------------------------------- */

/* Wer im Betriebssystem "Bewegung reduzieren" gesetzt hat, bekommt eine
   ruhige Variante: alles blendet nur noch ein, nichts faehrt herein,
   nichts wippt dauerhaft. */

@media (prefers-reduced-motion: reduce) {
	@keyframes dd-hero-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes dd-hero-in-left {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes dd-hero-in-centered {
		from {
			opacity: 0;
			transform: translateX(-50%);
		}
		to {
			opacity: 1;
			transform: translateX(-50%);
		}
	}

	.dd-hero__crest,
	.dd-hero__title,
	.dd-hero__subtitle,
	.dd-hero__scroll {
		animation-duration: 0.6s;
		animation-timing-function: ease;
	}

	/* Dauerhafte Bewegung entfaellt. */
	.dd-hero__scroll img {
		animation: none;
	}
}