/* ==========================================================================
   Racetime - Global
   --------------------------------------------------------------------------
   Hier steht nur, wofuer Bricks kein Style-Feld anbietet. Alles andere ist
   als Bricks-Klasse (BEM) hinterlegt und dort bearbeitbar.

   Regeln: nur ACSS-Variablen, keine eigenen Farben, keine clamp()-Groessen.
   Klassen in BEM: .block__element
   ========================================================================== */


/* ==========================================================================
   Bilder in den Sections
   object-fit / width / height stehen als Bricks-Felder an den Klassen
   .page-hero__img, .home-hero__img, .text-image__img.
   Uebrig bleibt nur der <figure>-Reset, den Bricks um das Bild legt.
   ========================================================================== */

.page-hero__image figure,
.home-hero__image figure,
.text-image__image figure,
.about__image figure {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}


/* ==========================================================================
   Home Hero - Laufband
   Fuer Keyframes/Animationen und fuer das gelbe Quadrat im Fliesstext
   gibt es in Bricks kein Feld.
   ========================================================================== */

.home-hero__marquee-track {
	animation: rt-marquee 38s linear infinite;
}

.home-hero__marquee-text {
	white-space: nowrap;
}

/* Gelbes Quadrat als Trenner zwischen den Begriffen (laut Design) */
.home-hero__marquee-dot {
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin: 0 var(--space-m);
	vertical-align: middle;
	background-color: var(--action);
}

@keyframes rt-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.home-hero__marquee-track {
		animation: none;
	}
}


/* ==========================================================================
   Header
   Alles Uebrige haengt an den Klassen .site-topbar* und .site-header*.
   ========================================================================== */

.site-header {
	backdrop-filter: blur(12px);
}

/* Topbar wird beim Scrollen ausgeblendet - es bleiben Logo und Navigation.
   Bricks setzt .scrolling auf #brx-header, sobald scrollY > 0 ist.
   Dafuer gibt es kein Bricks-Feld, weil der Zustand am Eltern-Element haengt. */
/* Der Header sitzt im Textfluss (position: sticky) und wird beim Scrollen
   niedriger. Dadurch schrumpft die Seite um ein paar Pixel, und Chromes
   Scroll-Anchoring zieht die Scrollposition wieder auf 0 zurueck - der Header
   klappt auf, die Seite springt zurueck, das Ganze von vorne. Die ersten
   Pixel liessen sich dadurch nicht scrollen und der Header blieb im falschen
   Zustand haengen. Ohne Anchoring bleibt die Scrollposition stehen. */
html {
	overflow-anchor: none;
}

.site-topbar {
	overflow: hidden;
}

#brx-header.scrolling .site-topbar {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-width: 0;
	visibility: hidden;
}

/* Ohne Topbar hat das Logo keinen Platz mehr nach oben - der Ueberstand
   faellt beim Scrollen weg, sonst wird es oben abgeschnitten. */
#brx-header.scrolling .site-header__logo {
	margin-top: 0;
}

.site-header__logo {
	display: flex;
	align-items: center;
}

/* Menuepunkte liegen im Nav-Menu-Element, dafuer gibt es keine eigene Klasse */
.site-header__menu .bricks-nav-menu > li > a {
	padding: var(--space-xs) 0;
	font-size: var(--text-s);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--primary);
	border-bottom: var(--btn-border-width) var(--border-style) transparent;
}

.site-header__menu .bricks-nav-menu > li > a:hover,
.site-header__menu .bricks-nav-menu > li.current-menu-item > a {
	border-bottom-color: var(--action);
}


/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer__legal .bricks-nav-menu {
	gap: var(--space-s);
}

.site-footer__legal .bricks-nav-menu > li > a {
	font-size: var(--text-xs);
	color: var(--white-trans-70);
}


/* ==========================================================================
   Filterleiste /ergebnisse/
   Kommt aus dem Shortcode [racetime_year_filter] und ist damit kein
   Bricks-Element - es gibt dafuer also keine Style-Felder.
   ========================================================================== */

.rt-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	margin: 0;
	padding-bottom: var(--space-m);
	border-bottom: var(--border-width) var(--border-style) var(--black-trans-10);
}

.rt-filter__field {
	position: relative;
	display: block;
	margin: 0;
	color: var(--primary);
}

.rt-filter__select {
	min-width: 20rem;
	padding: var(--space-xs) calc(var(--space-xs) * 3) var(--space-xs) var(--space-xs);
	font-size: var(--text-m);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--primary);
	background-color: var(--white);
	/* Bricks zeichnet auf jedes <select> einen grauen Pfeil aus zwei
	   Verlaeufen (frontend-light-layer.css). Der muss weg, sonst stehen
	   zwei Pfeile uebereinander - unserer kommt aus ::after. */
	background-image: none;
	border: var(--btn-border-width) var(--border-style) var(--primary);
	border-radius: var(--radius-none);
	cursor: pointer;
	appearance: none;
}

/* Chevron aus currentColor gezeichnet */
.rt-filter__field::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--space-xs);
	width: 0.7rem;
	height: 0.7rem;
	margin-top: -0.55rem;
	border-right: 2px var(--border-style) currentColor;
	border-bottom: 2px var(--border-style) currentColor;
	transform: rotate(45deg);
	pointer-events: none;
}

.rt-filter__search {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-left: auto;
	padding: 0 var(--space-xs);
	color: var(--primary);
	background-color: var(--white);
	border: var(--btn-border-width) var(--border-style) var(--primary);
}

.rt-filter__submit {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	line-height: 0;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.rt-filter__input {
	width: 20rem;
	padding: var(--space-xs) 0;
	font-size: var(--text-m);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--primary);
	background: transparent;
	border: 0;
	border-radius: var(--radius-none);
	outline: 0;
}

.rt-filter__input::placeholder {
	color: var(--primary);
	opacity: 0.5;
}

.rt-filter__input::-webkit-search-cancel-button {
	appearance: none;
}

/* Beschriftungen nur fuer Screenreader */
.rt-filter__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.rt-filter__select:focus-visible,
.rt-filter__submit:focus-visible,
.rt-filter__search:focus-within {
	outline: var(--btn-border-width) var(--border-style) var(--primary);
	outline-offset: 2px;
}

/* Zustaende der Live-Suche */
.rt-is-loading {
	opacity: 0.4;
	transition: opacity 0.15s ease;
}

.rt-hidden {
	display: none !important;
}


/* ==========================================================================
   Schmale Ansichten
   991px = Bricks-Breakpoint "Tablet Hochformat"
   ========================================================================== */

@media (max-width: 991px) {

	.rt-filter__field,
	.rt-filter__search {
		width: 100%;
	}

	.rt-filter__select,
	.rt-filter__input {
		width: 100%;
		min-width: 0;
	}

	.rt-filter__search {
		margin-left: 0;
	}
}