/* Regatta Results – Frontend
 *
 * Aufbau: Tabellen für breite Bildschirme, ab 720px abwärts werden die Zeilen
 * zu Karten umgebrochen. Die Spaltenüberschrift steckt dafür in data-label.
 */

.regatta-results {
	--rr-border: #dfe3e8;
	--rr-border-strong: #b9c0c8;
	--rr-muted: #667085;
	--rr-accent: #0b5fa5;
	--rr-accent-soft: #eaf2fa;
	--rr-bg-alt: #f7f8fa;
	--rr-radius: 6px;
	color: inherit;
	font-size: 0.95rem;
	margin: 1.5rem 0;
}

.regatta-results * {
	box-sizing: border-box;
}

/* --- Kopfbereich ------------------------------------------------------- */

.regatta-results__header {
	margin-bottom: 1rem;
}

.regatta-results__title {
	line-height: 1.2;
	margin: 0 0 0.25rem;
}

.regatta-results__subtitle,
.regatta-results__meta {
	color: var(--rr-muted);
	margin: 0 0 0.5rem;
}

/* Rennen, Runde, Lauf und Startzeit sind auf der Detailseite die eigentliche
   Kennzeichnung des Laufs und dürfen deshalb etwas größer stehen. */
.regatta-results__meta {
	font-size: 1.05rem;
}

.regatta-results__back {
	margin: 0 0 0.75rem;
}

.regatta-results__notice {
	color: var(--rr-muted);
	font-style: italic;
	margin: 1rem 0;
}

.rr-muted {
	color: var(--rr-muted);
	font-size: 0.85em;
	margin-left: 0.35rem;
}

/* --- Navigation -------------------------------------------------------- */

.regatta-results__daynav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
}

.regatta-results__daylink {
	background: var(--rr-bg-alt);
	border: 1px solid var(--rr-border);
	border-radius: var(--rr-radius);
	color: inherit;
	display: inline-block;
	padding: 0.4rem 0.8rem;
	text-decoration: none;
}

.regatta-results__daylink:hover {
	background: var(--rr-accent-soft);
	border-color: var(--rr-accent);
}

/* --- Stand der Regatta ------------------------------------------------- */

.rr-status {
	background: var(--rr-bg-alt);
	border-left: 4px solid var(--rr-accent);
	border-radius: 0 var(--rr-radius) var(--rr-radius) 0;
	margin: 0 0 1.25rem;
	padding: 0.5rem 0.85rem;
}

.rr-status__label {
	color: var(--rr-muted);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rr-status__value {
	font-weight: 700;
	margin-left: 0.35rem;
}

/* Auf der Detailseite trägt die Statuszeile den Zustand des Laufs und damit
   dessen Farbe. Der Marker soll dort so groß bleiben wie die Zeile. */
.rr-status__value.rr-state {
	font-size: 1rem;
	font-weight: 700;
}
.regatta-results__day {
	scroll-margin-top: 4rem;
}

.regatta-results__dayheading {
	border-bottom: 2px solid var(--rr-accent);
	font-size: 1.15rem;
	margin: 1.75rem 0 0.5rem;
	padding-bottom: 0.3rem;
}

/* --- Tabellen ---------------------------------------------------------- */

.regatta-results__table {
	border-collapse: collapse;
	margin: 0 0 1.25rem;
	width: 100%;
}

.regatta-results__table th,
.regatta-results__table td {
	border-bottom: 1px solid var(--rr-border);
	padding: 0.5rem 0.6rem;
	text-align: left;
	vertical-align: top;
}

.regatta-results__table thead th {
	border-bottom: 2px solid var(--rr-border-strong);
	color: var(--rr-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.regatta-results__table tbody tr:hover {
	background: var(--rr-accent-soft);
}

.rr-row.is-cancelled {
	color: var(--rr-muted);
}

.rr-row.is-cancelled .rr-boat {
	text-decoration: line-through;
}

.rr-row--break td {
	background: var(--rr-bg-alt);
	color: var(--rr-muted);
	font-style: italic;
}

.rr-col-num,
.rr-col-rank,
.rr-col-time {
	white-space: nowrap;
	width: 1%;
}

.rr-col-rank {
	font-size: 1.05em;
	font-weight: 700;
}

.rr-col-time {
	font-variant-numeric: tabular-nums;
}

.rr-col-links {
	text-align: right;
	white-space: nowrap;
	width: 1%;
}

.rr-link {
	display: inline-block;
	margin-left: 0.4rem;
	text-decoration: none;
	white-space: nowrap;
}

.rr-link::after {
	content: " \203A";
}

.rr-link--result {
	font-weight: 600;
}

.rr-race {
	font-weight: 600;
}

/* --- Ergebniszellen ---------------------------------------------------- */

.rr-col-split {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.rr-col-split--finish {
	font-weight: 700;
}

.rr-time {
	display: inline-block;
}

.rr-splitrank {
	color: var(--rr-muted);
	font-size: 0.85em;
	margin-left: 0.2rem;
}

.rr-delta {
	color: var(--rr-muted);
	display: block;
	font-size: 0.8em;
	font-weight: 400;
}

.rr-boat {
	font-weight: 600;
}

.rr-card {
	color: #d9a400;
	margin-left: 0.3rem;
}

.rr-crew {
	color: var(--rr-muted);
	font-size: 0.87em;
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
}

.rr-crew li {
	margin: 0;
}

/* --- Statusmarker ------------------------------------------------------ */

.rr-state {
	background: var(--rr-bg-alt);
	border-radius: 999px;
	color: var(--rr-muted);
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.1rem 0.6rem;
	white-space: nowrap;
}

/* Die Farbe hängt am Zustand, nicht an der Nummer der Zeitnahme – schickt sie
   eine unbekannte Nummer, stimmt die Farbe trotzdem. Die Nummer steht als
   zweite Klasse daneben, falls eine Website einzelne Stufen anders will. */

/* Noch nicht gestartet: schwarz und ohne Einfärbung, damit die laufenden und
   beendeten Läufe die einzigen farbigen Marker in der Spalte sind. */
.rr-state--pending {
	background: transparent;
	color: #111827;
	padding-left: 0;
	padding-right: 0;
}

/* Gestartet – live. Gelber Text wäre auf Weiß nicht lesbar, das Gelb sitzt
   deshalb im Hintergrund und die Schrift dunkel darauf. */
.rr-state--running {
	background: #fbe36b;
	color: #4a3600;
}

/* Beendet, ob offiziell oder nicht: dasselbe Dunkelgrün. */
.rr-state--finished {
	background: #dff3e3;
	color: #14532d;
}

.rr-state--cancelled {
	background: #ececef;
	color: #5c5f66;
	text-decoration: line-through;
}

/* Nicht zustande gekommenes Rennen: sachlicher Hinweis, nicht durchgestrichen. */
.rr-state--dropped {
	background: #fdf1d6;
	color: #7a5600;
}

.rr-row.is-cancelled .rr-race {
	text-decoration: none;
}

/* --- Veranstaltungsliste ----------------------------------------------- */

.rr-events {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rr-event {
	border-bottom: 1px solid var(--rr-border);
	padding: 0.6rem 0;
}

.rr-event__title {
	font-weight: 600;
}

/* --- Sponsorenrahmen --------------------------------------------------- */

.rr-frame {
	display: block;
}

.rr-frame__middle {
	display: block;
}

.rr-sponsors {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin: 1rem 0;
}

.rr-sponsors--left,
.rr-sponsors--right {
	display: none;
}

.rr-sponsor img {
	display: block;
	height: auto;
	max-height: 90px;
	max-width: 100%;
	width: auto;
}

.rr-sponsor__name {
	color: var(--rr-muted);
	font-weight: 600;
}

@media (min-width: 1200px) {
	.rr-frame--rails .rr-frame__middle {
		align-items: flex-start;
		display: flex;
		gap: 1.5rem;
	}

	.rr-frame--rails .rr-frame__content {
		flex: 1 1 auto;
		min-width: 0;
	}

	.rr-frame--rails .rr-sponsors--left,
	.rr-frame--rails .rr-sponsors--right {
		display: block;
		flex: 0 0 160px;
		position: sticky;
		top: 2rem;
	}

	.rr-frame--rails .rr-sponsors--left .rr-sponsor,
	.rr-frame--rails .rr-sponsors--right .rr-sponsor {
		margin-bottom: 1rem;
	}
}

/* --- Mobile Darstellung ------------------------------------------------ */

@media (max-width: 720px) {
	.regatta-results__table,
	.regatta-results__table tbody,
	.regatta-results__table tr,
	.regatta-results__table td {
		display: block;
		width: auto;
	}

	.regatta-results__table thead {
		display: none;
	}

	.regatta-results__table tr {
		background: #fff;
		border: 1px solid var(--rr-border);
		border-radius: var(--rr-radius);
		margin-bottom: 0.6rem;
		padding: 0.6rem 0.75rem;
	}

	.regatta-results__table td {
		border: 0;
		display: flex;
		gap: 0.75rem;
		justify-content: space-between;
		padding: 0.15rem 0;
		text-align: right;
	}

	.regatta-results__table td::before {
		color: var(--rr-muted);
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		text-align: left;
		text-transform: uppercase;
	}

	.regatta-results__table td:empty {
		display: none;
	}

	/* Bootsname und Mannschaft brauchen die volle Breite. */
	.rr-col-boat,
	.rr-col-race {
		display: block;
		text-align: left;
	}

	.rr-col-boat::before,
	.rr-col-race::before {
		display: none;
	}

	.rr-crew {
		margin-top: 0.2rem;
	}

	/* Der Rang wird zur Kopfzeile der Karte. */
	.rr-col-rank {
		border-bottom: 1px solid var(--rr-border);
		font-size: 1.1rem;
		margin-bottom: 0.35rem;
		padding-bottom: 0.35rem;
	}

	.rr-col-links {
		border-top: 1px solid var(--rr-border);
		display: flex;
		gap: 1rem;
		justify-content: flex-start;
		margin-top: 0.4rem;
		padding-top: 0.5rem;
		text-align: left;
		width: auto;
	}

	.rr-link {
		margin-left: 0;
	}

	.rr-delta {
		display: inline;
		margin-left: 0.3rem;
	}

	.rr-row--break td {
		display: block;
		text-align: left;
	}

	.rr-row--break td::before {
		display: none;
	}

	.regatta-results__dayheading {
		font-size: 1.05rem;
	}
}

/* --- Live-Aktualisierung ----------------------------------------------- */

.regatta-results.is-refreshing {
	opacity: 0.55;
	transition: opacity 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.regatta-results.is-refreshing {
		transition: none;
	}
}