/* Die Sonderseite zum Nellinger Kirbelauf, /kirbelauf/.
   Das Band über der Kopfleiste steht nicht hier, sondern in theme.css -
   es erscheint auf jeder Seite, dieses Stylesheet nur auf dieser.

   Die Seite ist breiter als ein Artikel und schmaler als eine Liste: Sie
   wird gelesen, aber auch überflogen. 60rem sind das Maß, das die
   Betriebsprofile schon benutzen. */

.fa-kirbe {
	max-width: 60rem;
	margin: 0 auto;
	padding-bottom: 40px;
}

/* Kopf */

.fa-kirbe-kopf {
	padding: 8px 0 30px;
	border-bottom: 1px solid var(--fa-linie);
	margin-bottom: 30px;
}

.fa-kirbe-kicker {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: none;
	color: var(--fa-text-sekund);
	font-variant-numeric: tabular-nums;
}

.fa-kirbe-punkt { padding: 0 5px; }

.fa-kirbe-titel {
	margin: 0 0 14px;
	font-size: clamp(32px, 6vw, 46px);
	line-height: 1.08;
	text-wrap: balance;
}

/* Der gelbe Strich unter dem Titel - dasselbe Zeichen wie am Kicker der
   Artikel, hier nur breiter. Er markiert: Das ist etwas Eigenes. */
.fa-kirbe-titel::after {
	content: "";
	display: block;
	width: 84px;
	height: 5px;
	margin-top: 12px;
	background: var(--fa-gelb);
}

.fa-kirbe-vorspann p {
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.6;
	max-width: 36rem;
}

.fa-kirbe-countdown-gross {
	margin: 22px 0 4px;
	font-size: 19px;
	line-height: 1.2;
	color: var(--fa-text-sekund);
}

/* Leer, solange das Skript nicht gelaufen ist - dann soll die Zeile auch
   keinen Platz beanspruchen. */
.fa-kirbe-countdown-gross:empty { display: none; }

.fa-kirbe-zahl {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 800;
	font-size: 46px;
	line-height: 1;
	color: var(--fa-tinte);
	margin-right: 6px;
	font-variant-numeric: tabular-nums;
}

.fa-kirbe-heute {
	margin: 20px 0 0;
	font-size: 20px;
	font-weight: 600;
}

.fa-kirbe-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
}

.fa-kirbe-knopf {
	display: inline-block;
	padding: 11px 20px;
	background: var(--fa-gelb);
	color: var(--fa-tinte);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 1px solid transparent;
}

.fa-kirbe-knopf:hover,
.fa-kirbe-knopf:focus-visible { filter: brightness(0.94); color: var(--fa-tinte); }

.fa-kirbe-knopf--leise {
	background: transparent;
	border-color: var(--fa-linie);
}

.fa-kirbe-knopf--leise:hover,
.fa-kirbe-knopf--leise:focus-visible { background: var(--fa-papier); filter: none; }

.fa-kirbe-hinweis {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--fa-text-sekund);
}

/* Eckdaten */

.fa-kirbe-eckdaten {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--fa-linie);
	border: 1px solid var(--fa-linie);
	margin-bottom: 36px;
}

.fa-kirbe-eck {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	background: var(--fa-karte);
}

.fa-kirbe-eck-name {
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--fa-text-sekund);
}

.fa-kirbe-eck-wert {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 800;
	font-size: 17px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.fa-kirbe-eck-zusatz { font-size: 13px; color: var(--fa-text-sekund); }

/* Abschnitte */

.fa-kirbe-abschnitt { margin-bottom: 38px; }

.fa-kirbe-ueberschrift {
	margin: 0 0 14px;
	font-size: 23px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fa-gelb);
}

.fa-kirbe-text {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.6;
	max-width: 36rem;
}

/* Zeitplan */

.fa-kirbe-tabelle-rahmen { overflow-x: auto; }

.fa-kirbe-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.fa-kirbe-tabelle th,
.fa-kirbe-tabelle td {
	text-align: left;
	padding: 11px 14px;
	border-bottom: 1px solid var(--fa-linie);
	white-space: nowrap;
}

.fa-kirbe-tabelle thead th {
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--fa-text-sekund);
	font-weight: 600;
	border-bottom-width: 2px;
}

.fa-kirbe-zeit {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.fa-kirbe-vorbehalt { color: var(--fa-text-sekund); font-weight: 400; }

.fa-kirbe-fussnote {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--fa-text-sekund);
	max-width: 36rem;
}

/* Strecke */

.fa-kirbe-plan { margin: 16px 0 0; }
.fa-kirbe-plan img { width: 100%; height: auto; display: block; }

.fa-kirbe-plan figcaption {
	margin-top: 7px;
	font-size: 13px;
	color: var(--fa-text-sekund);
}

/* Sponsorenwand */

.fa-kirbe-wand {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.fa-kirbe-sponsor {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 12px;
	border: 1px solid var(--fa-linie);
	background: var(--fa-karte);
	text-decoration: none;
	color: var(--fa-tinte);
	text-align: center;
}

.fa-kirbe-sponsor:hover,
.fa-kirbe-sponsor:focus-visible { border-color: var(--fa-gelb); }

/* Quadratisch und mit contain - so, wie die Logos im Filderguide angelegt
   sind. Ein Logo, das die Kachel füllt, drängt die Nachbarn an den Rand. */
.fa-kirbe-sponsor img {
	width: 100%;
	max-width: 118px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.fa-kirbe-sponsor-name { font-size: 13px; line-height: 1.3; }

/* Partner werden */

.fa-kirbe-mitmachen {
	padding: 22px;
	background: var(--fa-papier);
	border: 1px solid var(--fa-linie);
}

.fa-kirbe-mitmachen .fa-kirbe-ueberschrift { margin-top: 0; }

.fa-kirbe-pakete {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.fa-kirbe-pakete li {
	background: var(--fa-karte);
	border: 1px solid var(--fa-linie);
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fa-text-sekund);
}

.fa-kirbe-pakete strong {
	display: block;
	margin-bottom: 5px;
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: var(--fa-tinte);
}

.fa-kirbe-fuss {
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid var(--fa-linie);
	font-size: 13px;
	color: var(--fa-text-sekund);
}

@media (max-width: 767px) {
	.fa-kirbe-eckdaten { grid-template-columns: repeat(2, 1fr); }
	.fa-kirbe-pakete { grid-template-columns: 1fr; }
	.fa-kirbe-zahl { font-size: 38px; }
	.fa-kirbe-knopf { flex: 1 1 100%; text-align: center; }
	.fa-kirbe-mitmachen { padding: 18px 16px; }
}