/*
 * US Car Drivers Gera – Basis: Browser-Flächen, Kopf, Navigation, Knöpfe, Fuß.
 * Bereiche: start.css (Startseite), seiten.css (Inhaltsseiten), plugins.css (Formulare, Mitglieder, Voting).
 */

:root {
	--uscd-navy: var(--wp--preset--color--navy);
	--uscd-nacht: var(--wp--preset--color--nacht);
	--uscd-rot: var(--wp--preset--color--rot);
	--uscd-rot-dunkel: var(--wp--preset--color--rot-dunkel);
	--uscd-orange: var(--wp--preset--color--orange);
	--uscd-asphalt: var(--wp--preset--color--asphalt);
	--uscd-stahl: var(--wp--preset--color--stahl);
	--uscd-stahl-hell: var(--wp--preset--color--stahl-hell);
	--uscd-linie: var(--wp--preset--color--linie);
	--uscd-oswald: var(--wp--preset--font-family--oswald);
	--uscd-rand: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
	--uscd-abschnitt: clamp(4rem, 2.6rem + 5vw, 7.5rem);
	--uscd-schatten: 0 2px 4px rgba(8, 26, 45, 0.18), 0 12px 28px -8px rgba(8, 26, 45, 0.35);
	--uscd-stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.1.9-5.2 4.9 1.3 7.1L12 17.8l-6.3 3.5L7 14.2 1.8 9.3l7.1-.9z'/%3E%3C/svg%3E");
	--uscd-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
	scrollbar-color: var(--uscd-navy) var(--uscd-asphalt);
	accent-color: var(--uscd-rot);
}

/* Browser-Flächen */
::selection {
	background: var(--uscd-orange);
	color: var(--uscd-nacht);
}

body {
	caret-color: var(--uscd-rot);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* E-Mail-Adressen nicht mitten im Namen umbrechen */
a[href^="mailto:"] {
	white-space: nowrap;
}

:focus-visible {
	outline: 3px solid var(--uscd-orange);
	outline-offset: 3px;
	border-radius: 2px;
}

h1, h2, h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Knöpfe: Kontur-Variante dunkel auf hellem Grund, hell auf dunklem */
.wp-block-button__link {
	transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--uscd-navy);
	border: 2px solid currentColor;
	padding: calc(0.85em - 2px) calc(1.6em - 2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--uscd-navy);
	color: #fff;
	border-color: var(--uscd-navy);
}

:is(.has-navy-background-color, .has-nacht-background-color, .has-rot-background-color, .wp-block-cover.is-dark) .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #fff;
}

:is(.has-navy-background-color, .has-nacht-background-color, .has-rot-background-color, .wp-block-cover.is-dark) .wp-block-button.is-style-outline > .wp-block-button__link:hover,
:is(.has-navy-background-color, .has-nacht-background-color, .has-rot-background-color, .wp-block-cover.is-dark) .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--uscd-nacht);
	border-color: #fff;
}

.uscd-knopf-hell > .wp-block-button__link {
	background: #fff;
	color: var(--uscd-rot-dunkel);
}

.uscd-knopf-hell > .wp-block-button__link:hover,
.uscd-knopf-hell > .wp-block-button__link:focus-visible {
	background: var(--uscd-nacht);
	color: #fff;
}

/* Kopf */
.uscd-kopf-bereich {
	position: relative;
	z-index: 20;
	background: var(--uscd-nacht);
}

.uscd-kopf-bereich--ueber-bild {
	position: absolute;
	inset-inline: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	background: linear-gradient(180deg, rgba(8, 26, 45, 0.72) 0%, rgba(8, 26, 45, 0.28) 70%, rgba(8, 26, 45, 0) 100%);
}

.uscd-kopf {
	padding: 0.9rem var(--uscd-rand);
}

/* Vorlagen ohne eigenen Kopfbereich (von Twenty Twenty-Five, z. B. Suche): Kopf nachtblau, sonst steht die weiße
   Navigation auf Weiß */
.wp-block-template-part:not(.uscd-kopf-bereich) > .uscd-kopf {
	background: var(--uscd-nacht);
}

.uscd-kopf__leiste {
	gap: 1.5rem;
}

.uscd-kopf__logo {
	display: block;
	flex: none;
	line-height: 0;
	border-radius: 6px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 8px 18px -6px rgba(0, 0, 0, 0.55);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.uscd-kopf__logo:hover {
	transform: rotate(-2deg) scale(1.03);
}

.uscd-kopf__logo img {
	display: block;
	width: auto;
	height: clamp(2.75rem, 2.2rem + 1.6vw, 3.6rem);
	border-radius: 6px;
}

/* Navigation */
.uscd-nav {
	font-family: var(--uscd-oswald);
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	--navigation-layout-justification-setting: flex-end;
}

.uscd-nav .wp-block-navigation__container {
	gap: clamp(0.9rem, 0.2rem + 1.4vw, 1.9rem);
}

.uscd-nav .wp-block-navigation-item__content {
	padding-block: 0.4rem;
	text-decoration: none;
	color: #fff;
}

.uscd-nav .wp-block-navigation-item__content:hover,
.uscd-nav .current-menu-item > .wp-block-navigation-item__content,
.uscd-nav [aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--uscd-orange);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.45em;
}

.uscd-nav .wp-block-navigation__submenu-container {
	background: var(--uscd-nacht) !important;
	color: #fff !important;
	border: 1px solid rgba(169, 187, 208, 0.25) !important;
	border-radius: 4px;
	padding: 0.5rem 0;
	min-width: 15rem !important;
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6);
}

.uscd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.1rem;
	font-size: 1rem;
}

.uscd-nav .wp-block-navigation__responsive-container-open,
.uscd-nav .wp-block-navigation__responsive-container-close {
	color: #fff;
}

.uscd-nav .wp-block-navigation__responsive-container-open svg {
	width: 2rem;
	height: 2rem;
}

.uscd-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--uscd-nacht) !important;
	color: #fff !important;
	padding: 1.5rem var(--uscd-rand);
}

.uscd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 3.5rem;
}

.uscd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.35rem;
	align-items: flex-start;
}

.uscd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.6rem;
	padding-block: 0.35rem;
}

.uscd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: 0 0 0.5rem 1rem;
}

.uscd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.15rem;
	color: var(--uscd-stahl-hell);
}

/* Fuß: ohne Abstand an den letzten Abschnitt anschließen */
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > main {
	margin-block-start: 0;
}

.uscd-fuss {
	padding: clamp(3rem, 2rem + 3vw, 5rem) var(--uscd-rand) 2rem;
	margin-top: 0 !important;
}

.uscd-fuss a {
	color: #fff;
}

.uscd-fuss a:hover {
	color: var(--uscd-orange);
}

.uscd-fuss__spalten {
	gap: 2.5rem 3rem;
}

.uscd-fuss__logo {
	display: inline-block;
	line-height: 0;
	border-radius: 6px;
	box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.6);
}

.uscd-fuss__logo img {
	height: 4.5rem;
	width: auto;
	border-radius: 6px;
}

.uscd-fuss__verein {
	margin-top: 1.25rem;
	color: var(--uscd-stahl-hell);
}

.uscd-fuss__verein strong {
	color: #fff;
}

.uscd-fuss__titel {
	font-size: 1.0625rem !important;
	letter-spacing: 0.12em;
	color: var(--uscd-orange) !important;
	margin-bottom: 0.75rem;
}

.uscd-fuss__liste {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.45rem;
}

.uscd-fuss__copy {
	margin-top: 3rem !important;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(169, 187, 208, 0.22);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--uscd-stahl-hell);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Gemeinsame Bausteine der Startseite und der Inhaltsseiten: Einleitung, Sternliste, Gruppen-Hinweis, Pfeil-Link, Motto, Schluss */
.uscd-einleitung {
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.55;
	color: var(--uscd-stahl);
	margin: 0;
	max-width: 40em;
}

.uscd-eintritt {
	margin-top: 1.5rem !important;
	padding-left: 1.6rem;
	position: relative;
}

.uscd-eintritt::before,
.uscd-ausstattung li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 1em;
	height: 1em;
	background: var(--uscd-rot);
	-webkit-mask: var(--uscd-stern) center / contain no-repeat;
	mask: var(--uscd-stern) center / contain no-repeat;
}

.uscd-ausstattung {
	list-style: none;
	padding: 0;
	margin-inline: auto !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	column-gap: 3rem;
	border-top: 2px solid var(--uscd-navy);
}

.uscd-ausstattung li {
	position: relative;
	padding: 0.85rem 0 0.85rem 1.75rem;
	border-bottom: 1px solid var(--uscd-linie);
	font-size: var(--wp--preset--font-size--normal);
}

.uscd-ausstattung li::before {
	/* mittig zur ersten Zeile: Innenabstand + halbe Zeilenhöhe (1.6em) − halber Stern */
	top: calc(0.85rem + 0.8em - 0.475rem);
	width: 0.95rem;
	height: 0.95rem;
}

.uscd-gruppen {
	margin-top: 2.5rem !important;
	margin-inline: auto !important;
	gap: 1rem 1.5rem;
}

.uscd-gruppen p {
	margin: 0;
	font-weight: 700;
}

.uscd-fotowand__link,
.uscd-pfeil-link {
	margin: 0;
	padding-right: 1.5em; /* Platz für den Pfeil hinter dem Link */
	font-family: var(--uscd-oswald);
	font-weight: 500;
	font-size: 1.175rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Auf hellem Grund Navy mit rotem Pfeil, auf Navy und Nachtblau weiß mit orangem Pfeil (Glow On Dark) */
:is(.uscd-fotowand__link, .uscd-pfeil-link) a {
	--uscd-pfeil-farbe: var(--uscd-rot);
	color: var(--uscd-navy);
	text-decoration-color: var(--uscd-pfeil-farbe);
	text-decoration-thickness: 2px;
	position: relative;
}

:is(.has-navy-background-color, .has-nacht-background-color) :is(.uscd-fotowand__link, .uscd-pfeil-link) a {
	--uscd-pfeil-farbe: var(--uscd-orange);
	color: #fff;
}

/* Pfeil hinter dem letzten Wort der letzten Zeile: rechts außerhalb des Links (der Platz ist das Polster des Absatzes,
   ein Polster am Link selbst könnte allein in die nächste Zeile umbrechen), unten verankert statt mittig über alle
   Zeilen. 0.17em = halbe Höhe der Oswald-Zeile (1.436em) minus halber Pfeil */
:is(.uscd-fotowand__link, .uscd-pfeil-link) a::after {
	content: "";
	position: absolute;
	right: -1.5em;
	bottom: 0.17em;
	width: 1.1em;
	height: 1.1em;
	background: var(--uscd-pfeil-farbe);
	-webkit-mask: var(--uscd-pfeil) center / contain no-repeat;
	mask: var(--uscd-pfeil) center / contain no-repeat;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

:is(.uscd-fotowand__link, .uscd-pfeil-link) a:hover::after {
	transform: translateX(0.25em);
}

.uscd-motto {
	margin: 1.5rem 0 !important;
	padding: 1rem 0;
	border-block: 1px solid var(--uscd-linie);
}

.uscd-motto strong {
	display: block;
	font-family: var(--uscd-oswald);
	font-weight: 600;
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--uscd-navy);
	line-height: 1.2;
	margin-bottom: 0.25rem;
}

/* Schluss */
.uscd-schluss {
	padding-block: clamp(3rem, 2rem + 3vw, 5rem);
	position: relative;
	overflow: hidden;
}

.uscd-schluss__reihe {
	gap: 1.5rem 3rem;
	max-width: 78rem;
	margin-inline: auto !important;
	position: relative;
}

.uscd-schluss__termin.wp-block-heading {
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
	font-weight: 700;
	line-height: 1;
}

.uscd-schluss__reihe {
	z-index: 1;
}

/* Sternenreihe wie im Kennzeichen-Logo, ruhig im Hintergrund */
.uscd-schluss::before {
	content: "";
	position: absolute;
	right: -2rem;
	top: 50%;
	width: 26rem;
	height: 26rem;
	z-index: 1;
	transform: translateY(-50%) rotate(-8deg);
	background: rgba(255, 255, 255, 0.08);
	-webkit-mask: var(--uscd-stern) center / contain no-repeat;
	mask: var(--uscd-stern) center / contain no-repeat;
	pointer-events: none;
}

/* Fahrszenen (Schleifenvideos, siehe inc/video.php) */
.uscd-video {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--uscd-nacht);
}

/* Das Video füllt immer den Rahmen; Höhe oder Seitenverhältnis bestimmt der jeweilige Einsatzort */
.uscd-video .uscd-video__film {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.uscd-video__pause {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(8, 26, 45, 0.72);
	cursor: pointer;
	transition: background-color 0.2s ease-out;
}

.uscd-video__pause::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.1rem;
	height: 1.1rem;
	background: #fff;
	-webkit-mask: var(--uscd-pause) center / contain no-repeat;
	mask: var(--uscd-pause) center / contain no-repeat;
}

.uscd-video__pause[aria-pressed="true"]::before {
	-webkit-mask-image: var(--uscd-abspielen);
	mask-image: var(--uscd-abspielen);
}

.uscd-video__pause:hover {
	background: var(--uscd-rot);
}

:root {
	--uscd-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='5' height='16' rx='1'/%3E%3Crect x='14' y='4' width='5' height='16' rx='1'/%3E%3C/svg%3E");
	--uscd-abspielen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15a1 1 0 0 0 1.5.86l12-7.5a1 1 0 0 0 0-1.72l-12-7.5A1 1 0 0 0 7 4.5z'/%3E%3C/svg%3E");
}