/**
 * 09-wahl.css - Seite "Wahl & Service" (page-templates/template-wahl.php).
 *
 * Mobile-first. Verwendet ausschliesslich Tokens aus 01-tokens.css und baut auf
 * den Basis-Klassen aus 02-base.css sowie den Seiten-Bausteinen aus 06-pages.css
 * (.section, .container, .section__head, .eyebrow, .facts, .note-box,
 * .check-list, .btn) auf. Wird nach 07-consent.css und 08-branding.css geladen
 * und ueberschreibt bewusst nichts aus diesen Dateien.
 *
 * Ruhige Gestaltung: Blau und Weiss als Flaeche, Orange nur als schmaler Akzent.
 */

/* ==========================================================================
   1. Wahltermin
   ========================================================================== */

.wahl-termin__grid {
	display: grid;
	gap: var(--sp-5);
	align-items: stretch;
}

/* Die Datumskarte ist der ruhige Blickfang der Seite. */
.wahl-termin__card {
	position: relative;
	padding: var(--sp-6);
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, var(--c-blue-700) 0%, var(--c-blue-900) 100%);
	color: var(--c-blue-100);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

.wahl-termin__card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 4px;
	background: var(--color-accent);
}

.wahl-termin__weekday {
	margin: 0 0 var(--sp-1);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-blue-300);
}

.wahl-termin__date {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--c-white);
}

.wahl-termin__time {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: var(--c-white);
}

.wahl-termin__icon {
	display: inline-flex;
	line-height: 0;
	color: var(--color-accent);
}

.wahl-termin__source {
	margin: 0;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-blue-600);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: var(--c-blue-100);
}

.wahl-termin__body {
	padding: var(--sp-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: var(--shadow-sm);
}

.wahl-termin__subtitle {
	font-size: var(--fs-lg);
	margin-bottom: var(--sp-4);
}

.wahl-termin__hint {
	margin-top: var(--sp-5);
	font-size: var(--fs-sm);
	color: var(--color-muted);
}

/* --- Eckpunkte zum Wahlrecht --- */

.wahl-fakten {
	margin-top: var(--sp-7);
}

.wahl-fakten__title {
	font-size: var(--fs-lg);
	margin-bottom: var(--sp-4);
}

.wahl-fakten__list {
	margin: 0;
}

@media (min-width: 900px) {
	.wahl-termin__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--sp-6);
	}

	.wahl-termin__card {
		padding: var(--sp-7);
	}

	.wahl-termin__date {
		font-size: var(--fs-2xl);
	}

	.wahl-termin__body {
		padding: var(--sp-7);
	}
}

/* ==========================================================================
   2. Wahlbereich und Wahlbezirk
   ========================================================================== */

.wahl-begriffe {
	display: grid;
	gap: var(--sp-5);
}

.wahl-begriff {
	padding: var(--sp-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg-alt);
}

.wahl-begriff__label {
	display: inline-block;
	margin: 0 0 var(--sp-3);
	padding: 0.35em 0.9em;
	border-radius: var(--radius-pill);
	background: var(--c-blue-100);
	color: var(--color-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.wahl-begriff__title {
	font-size: var(--fs-lg);
	margin-bottom: var(--sp-3);
}

.wahl-begriff p:last-child {
	margin-bottom: 0;
}

/* Merksatz: schmaler Akzentstreifen, kein Kasten-Feuerwerk. */
.wahl-bereich__merksatz {
	margin-top: var(--sp-6);
	padding: var(--sp-5) var(--sp-6);
	border-inline-start: 4px solid var(--color-accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--c-accent-soft);
	color: var(--color-heading);
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
}

.wahl-bereich__strassen {
	margin-top: var(--sp-7);
	max-width: 68ch;
}

.wahl-bereich__strassen h3 {
	font-size: var(--fs-lg);
}

@media (min-width: 800px) {
	.wahl-begriffe {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-6);
	}

	.wahl-begriff {
		padding: var(--sp-7);
	}
}

/* ==========================================================================
   3. CDU-Liste (Tabelle)
   ========================================================================== */

.wahl-liste__scroll {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: var(--shadow-sm);
	-webkit-overflow-scrolling: touch;
}

.wahl-liste__scroll:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

.wahl-liste__table {
	width: 100%;
	min-width: 34rem;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.wahl-liste__caption {
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
	text-align: start;
	caption-side: top;
}

.wahl-liste__table thead th {
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 2px solid var(--color-border);
	background: var(--c-white);
	color: var(--color-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-align: start;
	white-space: nowrap;
}

.wahl-liste__table tbody th,
.wahl-liste__table tbody td {
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--color-border);
	text-align: start;
	vertical-align: top;
}

.wahl-liste__table tbody tr:last-child th,
.wahl-liste__table tbody tr:last-child td {
	border-bottom: 0;
}

.wahl-liste__platz {
	width: 3.5rem;
	color: var(--color-muted);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
}

.wahl-liste__name {
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
}

.wahl-liste__jahr {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Dezente Hervorhebung der eigenen Zeile: heller Grund, Akzentkante links. */
.wahl-liste__row--kandidat > th,
.wahl-liste__row--kandidat > td {
	background: var(--c-blue-50);
}

.wahl-liste__row--kandidat > th:first-child {
	box-shadow: inset 3px 0 0 0 var(--color-accent);
	color: var(--color-primary);
}

.wahl-liste__mark {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	color: var(--color-primary-light);
}

.wahl-liste__quelle,
.wahl-liste__fair {
	margin-top: var(--sp-4);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: var(--color-muted);
}

@media (min-width: 700px) {
	.wahl-liste__table {
		font-size: var(--fs-base);
	}

	.wahl-liste__table thead th,
	.wahl-liste__table tbody th,
	.wahl-liste__table tbody td {
		padding: var(--sp-4) var(--sp-5);
	}
}

/* ==========================================================================
   4. Weiterfuehrende Links
   ========================================================================== */

.link-gruppe + .link-gruppe {
	margin-top: var(--sp-8);
}

.link-gruppe__title {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
	font-size: var(--fs-lg);
	color: var(--color-heading);
}

.link-gruppe__title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-border);
}

.link-liste {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.link-liste__item {
	margin: 0;
}

.link-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	height: 100%;
	padding: var(--sp-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--transition), box-shadow var(--transition),
		transform var(--transition), background var(--transition);
}

.link-card:hover,
.link-card:focus-visible {
	border-color: var(--c-blue-300);
	background: var(--c-blue-50);
	box-shadow: var(--shadow);
	transform: translateY(-2px);
	color: inherit;
}

.link-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-3);
}

.link-card__title {
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.link-card:hover .link-card__title,
.link-card:focus-visible .link-card__title {
	color: var(--color-link-hover);
}

.link-card__extern {
	flex: 0 0 auto;
	margin-top: 0.15em;
	color: var(--color-primary-light);
}

.link-card__text {
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
	color: var(--color-text);
}

.link-card__url {
	margin-top: auto;
	padding-top: var(--sp-2);
	font-size: var(--fs-xs);
	letter-spacing: 0.02em;
	color: var(--color-muted);
	overflow-wrap: anywhere;
}

@media (min-width: 700px) {
	.link-liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-5);
	}
}

@media (min-width: 1100px) {
	.link-liste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   5. Abschluss-Hinweis
   ========================================================================== */

.wahl-hinweis__amt {
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius);
	background: var(--color-bg-alt);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
}

.wahl-hinweis__stand {
	font-size: var(--fs-xs);
	letter-spacing: 0.02em;
	color: var(--color-muted);
}

/* ==========================================================================
   6. Bewegung reduzieren
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.link-card:hover,
	.link-card:focus-visible {
		transform: none;
	}
}