/*
 * Kursplan — Darstellung im Frontend.
 *
 * Das ist die einzige Datei, die der Kursplan auf der Webseite laedt. Kein
 * JavaScript, kein jQuery, kein Bootstrap. Die Reiter schalten ueber
 * versteckte Optionsfelder und Nachbarselektoren um.
 *
 * Wichtig fuer WP Rocket: hier stehen keine erzeugten ID-Selektoren. Die
 * Umschaltregeln sprechen die Elemente ueber ihre Position an. Dadurch
 * funktionieren mehrere Kursplaene auf einer Seite von selbst, und "Remove
 * Unused CSS" findet ganz normale Klassenselektoren vor, die es zuordnen kann.
 *
 * Die Schrift wird bewusst vom Theme geerbt, damit sich der Plan in die
 * uebrige Seite einfuegt, statt eine zweite Schriftfamilie mitzubringen.
 */

.kp-wurzel {
	--kp-akzent: #d53104;
	--kp-akzent-dunkel: #a82603;
	--kp-text: #23282d;
	--kp-leise: #6b6f76;
	--kp-linie: #e4e6e8;
	--kp-flaeche: #ffffff;
	--kp-grund: #f7f7f8;
	--kp-radius: 14px;
	--kp-spalten: 0;

	color: var(--kp-text);
	font-family: inherit;
	line-height: 1.5;
}

.kp-wurzel *,
.kp-wurzel *::before,
.kp-wurzel *::after {
	box-sizing: border-box;
}

.kp-titel {
	margin: 0 0 1.25rem;
	font-size: 1.6rem;
	line-height: 1.25;
}

/* Nur fuer Screenreader. Nicht display:none — sonst faellt der Inhalt aus
   dem Vorlesefluss und die Optionsfelder aus der Tabreihenfolge. */
.kp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------
 * Reiter
 * ----------------------------------------------------------------- */

.kp-tabs {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0; /* fieldset sperrt sich sonst gegen schmale Raster */
}

.kp-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kp-reiter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--kp-linie);
}

.kp-reiter-knopf {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--kp-linie);
	border-radius: 999px;
	background: var(--kp-flaeche);
	color: var(--kp-leise);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kp-reiter-knopf:hover {
	border-color: var(--kp-akzent);
	color: var(--kp-akzent);
}

/* Der ausgewaehlte Reiter und sein Inhalt.
 *
 * Angesprochen wird ueber die Position, nicht ueber eine erzeugte ID. Die
 * Zuordnung stimmt nur, solange Beschriftungen und Inhalte in derselben
 * Reihenfolge stehen — deshalb laesst der Renderer leere Reiter ganz weg,
 * statt sie stehen zu lassen. */
.kp-panel {
	display: none;
}

.kp-tabs > .kp-radio:nth-of-type(1):checked ~ .kp-panels > .kp-panel:nth-child(1),
.kp-tabs > .kp-radio:nth-of-type(2):checked ~ .kp-panels > .kp-panel:nth-child(2),
.kp-tabs > .kp-radio:nth-of-type(3):checked ~ .kp-panels > .kp-panel:nth-child(3),
.kp-tabs > .kp-radio:nth-of-type(4):checked ~ .kp-panels > .kp-panel:nth-child(4),
.kp-tabs > .kp-radio:nth-of-type(5):checked ~ .kp-panels > .kp-panel:nth-child(5),
.kp-tabs > .kp-radio:nth-of-type(6):checked ~ .kp-panels > .kp-panel:nth-child(6),
.kp-tabs > .kp-radio:nth-of-type(7):checked ~ .kp-panels > .kp-panel:nth-child(7),
.kp-tabs > .kp-radio:nth-of-type(8):checked ~ .kp-panels > .kp-panel:nth-child(8),
.kp-tabs > .kp-radio:nth-of-type(9):checked ~ .kp-panels > .kp-panel:nth-child(9),
.kp-tabs > .kp-radio:nth-of-type(10):checked ~ .kp-panels > .kp-panel:nth-child(10),
.kp-tabs > .kp-radio:nth-of-type(11):checked ~ .kp-panels > .kp-panel:nth-child(11),
.kp-tabs > .kp-radio:nth-of-type(12):checked ~ .kp-panels > .kp-panel:nth-child(12),
.kp-tabs > .kp-radio:nth-of-type(13):checked ~ .kp-panels > .kp-panel:nth-child(13),
.kp-tabs > .kp-radio:nth-of-type(14):checked ~ .kp-panels > .kp-panel:nth-child(14),
.kp-tabs > .kp-radio:nth-of-type(15):checked ~ .kp-panels > .kp-panel:nth-child(15),
.kp-tabs > .kp-radio:nth-of-type(16):checked ~ .kp-panels > .kp-panel:nth-child(16),
.kp-tabs > .kp-radio:nth-of-type(17):checked ~ .kp-panels > .kp-panel:nth-child(17),
.kp-tabs > .kp-radio:nth-of-type(18):checked ~ .kp-panels > .kp-panel:nth-child(18),
.kp-tabs > .kp-radio:nth-of-type(19):checked ~ .kp-panels > .kp-panel:nth-child(19),
.kp-tabs > .kp-radio:nth-of-type(20):checked ~ .kp-panels > .kp-panel:nth-child(20),
.kp-tabs > .kp-radio:nth-of-type(21):checked ~ .kp-panels > .kp-panel:nth-child(21),
.kp-tabs > .kp-radio:nth-of-type(22):checked ~ .kp-panels > .kp-panel:nth-child(22),
.kp-tabs > .kp-radio:nth-of-type(23):checked ~ .kp-panels > .kp-panel:nth-child(23),
.kp-tabs > .kp-radio:nth-of-type(24):checked ~ .kp-panels > .kp-panel:nth-child(24) {
	display: block;
}

.kp-tabs > .kp-radio:nth-of-type(1):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(1),
.kp-tabs > .kp-radio:nth-of-type(2):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(2),
.kp-tabs > .kp-radio:nth-of-type(3):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(3),
.kp-tabs > .kp-radio:nth-of-type(4):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(4),
.kp-tabs > .kp-radio:nth-of-type(5):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(5),
.kp-tabs > .kp-radio:nth-of-type(6):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(6),
.kp-tabs > .kp-radio:nth-of-type(7):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(7),
.kp-tabs > .kp-radio:nth-of-type(8):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(8),
.kp-tabs > .kp-radio:nth-of-type(9):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(9),
.kp-tabs > .kp-radio:nth-of-type(10):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(10),
.kp-tabs > .kp-radio:nth-of-type(11):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(11),
.kp-tabs > .kp-radio:nth-of-type(12):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(12),
.kp-tabs > .kp-radio:nth-of-type(13):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(13),
.kp-tabs > .kp-radio:nth-of-type(14):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(14),
.kp-tabs > .kp-radio:nth-of-type(15):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(15),
.kp-tabs > .kp-radio:nth-of-type(16):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(16),
.kp-tabs > .kp-radio:nth-of-type(17):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(17),
.kp-tabs > .kp-radio:nth-of-type(18):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(18),
.kp-tabs > .kp-radio:nth-of-type(19):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(19),
.kp-tabs > .kp-radio:nth-of-type(20):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(20),
.kp-tabs > .kp-radio:nth-of-type(21):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(21),
.kp-tabs > .kp-radio:nth-of-type(22):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(22),
.kp-tabs > .kp-radio:nth-of-type(23):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(23),
.kp-tabs > .kp-radio:nth-of-type(24):checked ~ .kp-reiter > .kp-reiter-knopf:nth-child(24) {
	border-color: var(--kp-akzent);
	background: var(--kp-akzent);
	color: #ffffff;
}

/* Der Fokusrahmen. Ohne ihn waere die Tastaturbedienung zwar vorhanden,
   aber unsichtbar — man wuesste nie, wo man gerade steht. */
.kp-tabs > .kp-radio:nth-of-type(1):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(1),
.kp-tabs > .kp-radio:nth-of-type(2):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(2),
.kp-tabs > .kp-radio:nth-of-type(3):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(3),
.kp-tabs > .kp-radio:nth-of-type(4):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(4),
.kp-tabs > .kp-radio:nth-of-type(5):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(5),
.kp-tabs > .kp-radio:nth-of-type(6):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(6),
.kp-tabs > .kp-radio:nth-of-type(7):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(7),
.kp-tabs > .kp-radio:nth-of-type(8):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(8),
.kp-tabs > .kp-radio:nth-of-type(9):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(9),
.kp-tabs > .kp-radio:nth-of-type(10):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(10),
.kp-tabs > .kp-radio:nth-of-type(11):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(11),
.kp-tabs > .kp-radio:nth-of-type(12):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(12),
.kp-tabs > .kp-radio:nth-of-type(13):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(13),
.kp-tabs > .kp-radio:nth-of-type(14):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(14),
.kp-tabs > .kp-radio:nth-of-type(15):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(15),
.kp-tabs > .kp-radio:nth-of-type(16):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(16),
.kp-tabs > .kp-radio:nth-of-type(17):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(17),
.kp-tabs > .kp-radio:nth-of-type(18):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(18),
.kp-tabs > .kp-radio:nth-of-type(19):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(19),
.kp-tabs > .kp-radio:nth-of-type(20):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(20),
.kp-tabs > .kp-radio:nth-of-type(21):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(21),
.kp-tabs > .kp-radio:nth-of-type(22):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(22),
.kp-tabs > .kp-radio:nth-of-type(23):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(23),
.kp-tabs > .kp-radio:nth-of-type(24):focus-visible ~ .kp-reiter > .kp-reiter-knopf:nth-child(24) {
	outline: 3px solid var(--kp-akzent-dunkel);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------
 * Kartenraster
 * ----------------------------------------------------------------- */

/* Ohne feste Spaltenzahl richtet sich das Raster nach der verfuegbaren
   Breite. Das Attribut spalten="3" setzt --kp-spalten und schaltet auf eine
   feste Zahl um. */
.kp-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1.25rem;
}

.kp-wurzel[style*="--kp-spalten"] .kp-raster {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.kp-karte {
	display: flex;
	flex-direction: column;
	padding: 1.35rem;
	border: 1px solid var(--kp-linie);
	border-top: 3px solid var(--kp-kursfarbe, var(--kp-akzent));
	border-radius: var(--kp-radius);
	background: var(--kp-flaeche);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
}

.kp-karte-titel {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.3;
}

.kp-karte-zusatz {
	margin: 0.35rem 0 0;
	color: var(--kp-leise);
	font-size: 0.875rem;
	line-height: 1.4;
}

/* --------------------------------------------------------------------
 * Terminzeilen
 * ----------------------------------------------------------------- */

.kp-termine {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.kp-termin + .kp-termin {
	border-top: 1px solid var(--kp-linie);
}

/* Die ganze Zeile ist die Klickflaeche, nicht nur ein kleiner Knopf am
   Rand. Auf dem Handy ist das der Unterschied zwischen treffen und daneben. */
.kp-termin-inhalt {
	display: grid;
	grid-template-columns: 2.4rem 1fr auto auto;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.6rem 0.25rem;
	color: inherit;
	text-decoration: none;
}

a.kp-termin-link:hover,
a.kp-termin-link:focus-visible {
	background: var(--kp-grund);
	color: var(--kp-akzent);
}

a.kp-termin-link:focus-visible {
	outline: 3px solid var(--kp-akzent-dunkel);
	outline-offset: -3px;
}

.kp-tag {
	color: var(--kp-leise);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kp-datum {
	font-weight: 600;
}

.kp-zeit {
	color: var(--kp-leise);
	font-variant-numeric: tabular-nums;
}

.kp-pfeil {
	color: var(--kp-akzent);
	font-size: 1.2rem;
	line-height: 1;
}

.kp-termin--voll .kp-termin-inhalt {
	color: var(--kp-leise);
}

.kp-termin-status {
	font-size: 0.8rem;
	font-style: italic;
}

/* --------------------------------------------------------------------
 * Weitere Termine
 * ----------------------------------------------------------------- */

/* details bringt seine Klapp-Mechanik selbst mit, samt Tastaturbedienung und
   der richtigen Ansage im Screenreader. Deshalb steht hier nichts, was
   display auf dem Inhalt umstellt — das wuerde genau diese Mechanik
   aushebeln. */
.kp-mehr {
	margin-top: 0.5rem;
	border-top: 1px solid var(--kp-linie);
}

.kp-mehr-knopf {
	padding: 0.6rem 0.25rem;
	color: var(--kp-akzent);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	list-style: revert;
}

.kp-mehr-knopf:hover {
	color: var(--kp-akzent-dunkel);
}

.kp-mehr-knopf:focus-visible {
	outline: 3px solid var(--kp-akzent-dunkel);
	outline-offset: 2px;
}

.kp-mehr .kp-termine {
	margin-top: 0;
}

/* --------------------------------------------------------------------
 * Hinweise
 * ----------------------------------------------------------------- */

.kp-gesperrt,
.kp-hinweis {
	margin: 1rem 0 0;
	padding: 0.7rem 0.9rem;
	border-radius: 8px;
	background: var(--kp-grund);
	color: var(--kp-leise);
	font-size: 0.9rem;
}

.kp-jederzeit {
	color: var(--kp-akzent);
	font-weight: 600;
}

.kp-leer {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var(--kp-linie);
	border-radius: var(--kp-radius);
	color: var(--kp-leise);
	text-align: center;
}

/* Nur fuer Redakteure, deshalb bewusst auffaellig und nicht huebsch. */
.kp-notiz {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border-left: 4px solid #d98500;
	background: #fff8e6;
	color: #6b4c00;
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------
 * Schmale Anzeigen
 * ----------------------------------------------------------------- */

@media (max-width: 480px) {
	.kp-termin-inhalt {
		grid-template-columns: 2.2rem 1fr auto;
		gap: 0.4rem;
	}

	.kp-pfeil {
		display: none;
	}

	.kp-reiter {
		gap: 0.4rem;
	}

	.kp-reiter-knopf {
		padding: 0.45rem 0.85rem;
		font-size: 0.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kp-reiter-knopf {
		transition: none;
	}
}

/* --------------------------------------------------------------------
 * Regeltermin und kompakte Zeilen (seit 1.3.0)
 * ----------------------------------------------------------------- */

/* Der regelmaessige Termin eines Kurses, etwa "sonntags · 17:15 Uhr".
   Viele Kurse heissen gleich, erst diese Zeile unterscheidet die Karten. */
.kp-karte-zeit {
	margin: 0.3rem 0 0;
	color: var(--kp-akzent);
	font-size: 0.95rem;
	font-weight: 700;
}

/* Stehen Wochentag und Uhrzeit oben, zeigen die Zeilen nur das Datum. */
.kp-termine--kompakt .kp-termin-inhalt {
	grid-template-columns: 1fr auto;
}

/* --------------------------------------------------------------------
 * Kalender der Starttermine (seit 1.5.0)
 * ----------------------------------------------------------------- */

.kp-kalender {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1.25rem;
	align-items: start;
}

/* Themes wie Astra geben Tabellen Rahmen, Innenabstand und Streifen.
   Deshalb hier mit .kp-wurzel davor zuruecksetzen. */
.kp-wurzel .kp-monat {
	width: 100%;
	margin: 0;
	padding: 0.25rem 0.5rem 0.6rem;
	border: 1px solid var(--kp-linie);
	border-collapse: separate;
	border-spacing: 0 2px;
	border-radius: var(--kp-radius);
	background: var(--kp-flaeche);
	table-layout: fixed;
}

.kp-wurzel .kp-monat caption {
	caption-side: top;
	padding: 0 0 0.6rem;
	color: var(--kp-text);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
}

.kp-wurzel .kp-monat th,
.kp-wurzel .kp-monat td {
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	vertical-align: middle;
}

.kp-wurzel .kp-monat th {
	height: 2rem;
	color: var(--kp-leise);
	font-size: 0.75rem;
	font-weight: 700;
}

.kp-wurzel .kp-monat td {
	height: 2.6rem;
	color: var(--kp-text);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.kp-wurzel .kp-monat td.kp-kal-vorbei {
	color: var(--kp-leise);
	opacity: 0.5;
}

.kp-wurzel .kp-monat td.kp-kal-heute {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.kp-wurzel .kp-kal-marke {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--kp-akzent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.kp-wurzel a.kp-kal-marke:hover,
.kp-wurzel a.kp-kal-marke:focus-visible {
	background: var(--kp-akzent-dunkel);
	color: #fff;
}

.kp-wurzel a.kp-kal-marke:focus-visible {
	outline: 3px solid var(--kp-akzent-dunkel);
	outline-offset: 2px;
}

/* Wie viele Kurse an diesem Tag starten, als kleine Zahl in der Ecke. */
.kp-kal-anzahl {
	position: absolute;
	top: -0.3rem;
	right: -0.35rem;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.2rem;
	border: 2px solid var(--kp-flaeche);
	border-radius: 999px;
	background: var(--kp-text);
	color: #fff;
	font-size: 0.65rem;
	line-height: 0.95rem;
}

.kp-kal-legende {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0 0;
	color: var(--kp-leise);
	font-size: 0.875rem;
}

.kp-kal-punkt {
	flex: none;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	background: var(--kp-akzent);
}

.kp-kal-ueberschrift {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.1rem;
}

.kp-kal-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kp-kal-tag {
	padding: 0.5rem 0.75rem;
	border-left: 3px solid transparent;
	border-radius: 0 8px 8px 0;
	scroll-margin-top: 6rem;
}

.kp-kal-tag + .kp-kal-tag {
	margin-top: 0.25rem;
}

/* Der Tag, zu dem ein Klick im Kalender gesprungen ist. */
.kp-kal-tag:target {
	border-left-color: var(--kp-akzent);
	background: var(--kp-grund);
}

.kp-kal-datum {
	margin: 0;
	color: var(--kp-akzent);
	font-weight: 700;
}

.kp-kal-tag .kp-termine {
	margin-top: 0.25rem;
}

.kp-kal-liste .kp-termin-inhalt {
	grid-template-columns: 1fr auto auto;
}

.kp-kal-kurs {
	font-weight: 600;
}

@media (max-width: 480px) {
	.kp-wurzel .kp-monat td {
		height: 2.4rem;
	}

	.kp-wurzel .kp-kal-marke {
		width: 2.05rem;
		height: 2.05rem;
	}
}