/*
 * Kursplan.
 *
 * Alles Sichtbare hängt an den Variablen unter .mykk. Die Anpassung an eine
 * Website passiert dort oder in einer Skin-Klasse – nicht durch Umschreiben
 * der Regeln.
 *
 * Das Raster ist ein echtes CSS-Grid: Spalte aus dem Wochentag, Zeile aus der
 * Uhrzeit. Beides setzt PHP als --s und --z je Karte. Unsichtbare
 * Platzhalterkarten sind damit überflüssig.
 */

.mykk {
	--mykk-farbe: currentColor;
	--mykk-abstand: 16px;
	--mykk-radius: 10px;
	--mykk-rahmen: 1px solid rgba(0, 0, 0, .14);
	--mykk-karte-bg: transparent;
	--mykk-karte-farbe: inherit;
	--mykk-tag-farbe: inherit;

	/* Getrennt, weil Spalten und Zeilen unterschiedlich weit auseinanderstehen. */
	--mykk-abstand-spalte: var(--mykk-abstand);
	--mykk-abstand-zeile: var(--mykk-abstand);

	/* Luft zwischen Adresse und Wochentagen, und zwischen Wochentag und erster Karte. */
	--mykk-abstand-kopf: 44px;
	--mykk-abstand-tag: 18px;

	/*
	 * Sollbreite einer Tagesspalte. Sie darf schrumpfen, aber nicht wachsen –
	 * dadurch sind die Karten bei jedem Standort gleich breit, egal ob er einen
	 * oder fünf Kurstage hat.
	 */
	--mykk-spalte-soll: 260px;

	container-type: inline-size;
}

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

.mykk__reiter {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 24px;
}

.mykk__reiter-knopf {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: .35em 0;
	font: inherit;
	font-weight: 700;
	color: inherit;
	cursor: pointer;
	opacity: .55;
	transition: opacity .18s, border-color .18s;
}

.mykk__reiter-knopf[aria-selected="true"] {
	opacity: 1;
	border-bottom-color: var(--mykk-akzent, currentColor);
}

.mykk__reiter-knopf:hover {
	opacity: 1;
}

.mykk__reiter-knopf:focus-visible {
	outline: 2px solid var(--mykk-akzent, currentColor);
	outline-offset: 3px;
}

/* --------------------------------------------------------------- Kopf */

.mykk__ort {
	margin: 0 0 .25em;
}

.mykk__adresse,
.mykk__ort:last-child {
	margin: 0 0 var(--mykk-abstand-kopf);
}

/* -------------------------------------------------------------- Raster */

.mykk__raster {
	display: grid;
	grid-template-columns: repeat(var(--mykk-spalten, 5), minmax(0, var(--mykk-spalte-soll)));
	gap: var(--mykk-abstand-zeile) var(--mykk-abstand-spalte);
	align-items: start;
	/* Zentriert, damit ein Standort mit wenigen Kurstagen nicht angeschnitten wirkt. */
	justify-content: center;
}

.mykk__tag {
	grid-column: var(--s);
	grid-row: 1;
	text-align: center;
	font-weight: 700;
	color: var(--mykk-tag-farbe);
	margin-bottom: var(--mykk-abstand-tag);
}

/* ------------------------------------------------------ Tagesblöcke
 *
 * Für Standorte mit wenigen Kurstagen. Die Kurse eines Tages stehen
 * nebeneinander, der Wochentag darüber. Kein Raster – es gäbe hier nichts
 * auszurichten.
 */

.mykk__block + .mykk__block {
	margin-top: 40px;
}

.mykk__block-karten {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mykk-abstand-zeile) var(--mykk-abstand-spalte);
}

.mykk__block-karten > .mykk__karte {
	flex: 0 1 var(--mykk-spalte-soll);
	max-width: 100%;
}

/* -------------------------------------------------------------- Karte */

.mykk__karte {
	grid-column: var(--s);
	grid-row: var(--z);

	display: flex;
	flex-direction: column;
	gap: .35em;
	align-items: center;
	justify-content: center;
	text-align: center;

	margin: 0;
	padding: 16px 12px;
	border: var(--mykk-rahmen);
	border-radius: var(--mykk-radius);
	background: var(--mykk-karte-bg);
	color: var(--mykk-karte-farbe);
	font: inherit;
	width: 100%;
}

.mykk__karte--klickbar {
	cursor: pointer;
	transition: transform .18s, box-shadow .18s;
}

.mykk__karte--klickbar:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.mykk__karte--klickbar:focus-visible {
	outline: 2px solid var(--mykk-akzent, currentColor);
	outline-offset: 3px;
}

.mykk__name {
	font-weight: 700;
}

/* ------------------------------------------------------------- Fenster */

/*
 * Breite in Pixel und vw, nicht in Prozent oder rem:
 *
 * 1. `container-type: inline-size` auf .mykk macht den Plan zum Bezugsrahmen –
 *    Prozentangaben zielten damit auf den Container statt auf das Fenster.
 * 2. provital-sport.de setzt die Grundschrift auf 10px (62,5-Prozent-Technik),
 *    karate-team-wiesler.de auf 16px. Dieselbe rem-Angabe ergäbe dort 340px und
 *    hier 544px – der Kurstitel brach deshalb dreizeilig um. Aus demselben Grund
 *    stehen auch die Abstände oben in Pixel. Die rem-Werte im Wiesler-Skin
 *    dürfen bleiben: Sie gelten nur dort und sind gegen den alten Plan gemessen.
 */
.mykk dialog.mykk__dialog {
	width: min(560px, calc(100vw - 32px));
	max-width: min(560px, calc(100vw - 32px));
	padding: 32px;
	border: 0;
	border-radius: var(--mykk-radius);
	color: inherit;
}

.mykk .mykk__dialog-titel {
	font-size: 26px;
	line-height: 1.25;
}

.mykk__dialog::backdrop {
	background: rgba(0, 0, 0, .55);
}

.mykk__dialog-zu {
	position: absolute;
	top: 8px;
	right: 12px;
	appearance: none;
	background: none;
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}

.mykk__dialog-titel {
	margin: 0 0 .75em;
	padding-right: 24px;
}

.mykk__dialog-text p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mykk__karte--klickbar {
		transition: none;
	}

	.mykk__karte--klickbar:hover {
		transform: none;
	}
}

/* =====================================================================
 * Skins
 *
 * Die Werte stammen aus den bestehenden Seiten, am 07.08.2026 im Browser
 * gemessen. Wer sie ändert, ändert das Aussehen – die Logik bleibt davon
 * unberührt.
 * ================================================================== */

/* ------------------------------------------- karate-team-wiesler.de */

.mykk--wiesler {
	--mykk-akzent: #FFD06B;
	--mykk-abstand-zeile: 20px;
	--mykk-abstand-spalte: 10px;
	--mykk-radius: 10px;
	--mykk-rahmen: 1px solid #434343;
	--mykk-karte-farbe: #434343;
	--mykk-tag-farbe: #434343;
}

.mykk--wiesler .mykk__reiter-knopf {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 24px;
	font-weight: 900;
	text-transform: uppercase;
	color: #363636;
	padding-bottom: 10px;
	border-bottom-width: 3px;
}

.mykk--wiesler .mykk__tag {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.3rem;
	font-weight: 900;
	text-transform: uppercase;
}

/*
 * Innenabstände über Ränder statt gap – so wie der bisherige Plan sie hatte.
 * Mit gap käme die Karte 18px zu hoch.
 */
.mykk--wiesler .mykk__karte {
	padding: 30px 15px;
	gap: 0;
	/* Fest, nicht geerbt: der Seitenkontext liefert 1.7 und macht die Karte 18px höher. */
	line-height: 1.45;
}

.mykk--wiesler .mykk__alter,
.mykk--wiesler .mykk__zeit {
	font-size: 16px;
	font-weight: 500;
}

.mykk--wiesler .mykk__alter {
	margin: 0;
}

/* Der Kursname sitzt in einer gelben Pille. */
.mykk--wiesler .mykk__name {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.3rem;
	font-weight: 900;
	background: var(--mykk-akzent);
	border-radius: 100px;
	padding: 3px 15px;
	margin: 5px 0;
}

.mykk--wiesler .mykk__zeit {
	margin: 0 0 20px;
}

.mykk--wiesler .mykk__kartenort {
	font-size: 16px;
	font-weight: 900;
	text-transform: uppercase;
}

/* Ortsmarke vor dem Standort, wie bisher. */
.mykk--wiesler .mykk__kartenort::before {
	content: "";
	display: inline-block;
	width: .85em;
	height: 1em;
	margin-right: .4em;
	vertical-align: -.12em;
	background: currentColor;
	-webkit-mask: var(--mykk-pin) center / contain no-repeat;
	mask: var(--mykk-pin) center / contain no-repeat;
	--mykk-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192 384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2 12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 110 128 64 64 0 010-128z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------- provital-sport.de */

.mykk--provital {
	--mykk-akzent: #F9DA78;
	--mykk-abstand: 10px;
	--mykk-radius: 0;
	--mykk-farbe: #F9DA78;
	--mykk-karte-bg: #fff;
	--mykk-karte-farbe: #1C1D21;
	--mykk-tag-farbe: #fff;
}

/* Nur hier trägt die Karte den farbigen Balken der Kursart. */
.mykk--provital .mykk__karte {
	border: 0;
	border-left: 10px solid var(--mykk-farbe);
}

.mykk--provital .mykk__tag {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 20px;
}

.mykk--provital .mykk__karte {
	padding: 20px;
	gap: 5px;
}

.mykk--provital .mykk__name {
	font-size: 20px;
	font-weight: 500;
}

.mykk--provital .mykk__zeit {
	font-size: 17px;
	font-weight: 300;
}

.mykk--provital .mykk__dialog {
	background: #fff;
	color: #1C1D21;
}


/* =====================================================================
 * Schmalere Ansichten
 *
 * Der alte Plan hatte hier nichts: fünf Spalten blieben fünf Spalten, bis der
 * Text brach. Drei Stufen lösen das.
 * ================================================================== */

/*
 * Stufe 1 – der Platz wird knapp, das Raster bleibt aber lesbar.
 * Karten und Schrift werden kompakter, statt den Text umbrechen zu lassen.
 */
@container (max-width: 1000px) {
	.mykk {
		--mykk-abstand-kopf: 32px;
		--mykk-abstand-spalte: 8px;
		--mykk-abstand-zeile: 12px;
	}

	.mykk__karte {
		padding: 18px 10px;
	}

	.mykk--wiesler .mykk__karte {
		padding: 18px 10px;
	}

	.mykk--wiesler .mykk__name,
	.mykk--wiesler .mykk__tag {
		font-size: 1.05rem;
	}

	.mykk--wiesler .mykk__name {
		padding: 3px 10px;
	}

	.mykk--wiesler .mykk__alter,
	.mykk--wiesler .mykk__zeit,
	.mykk--wiesler .mykk__kartenort {
		font-size: 14px;
	}

	.mykk--wiesler .mykk__zeit {
		margin-bottom: 12px;
	}
}

/*
 * Stufe 2 – unter dieser Breite trägt kein Wochenraster mehr. Es kippt in eine
 * Liste: Wochentag als Überschrift, darunter seine Kurse. Möglich ist das nur,
 * weil die Ausgabe im Quelltext tagweise sortiert ist.
 *
 * Die Karten werden dabei flach: Angaben nebeneinander statt untereinander.
 * Sonst wäre die Liste bei Bötzingen über 3000 Pixel lang.
 */
@container (max-width: 720px) {
	.mykk__raster {
		display: flex;
		flex-direction: column;
		gap: 10px;
		/*
		 * Ohne das gilt align-items:start aus der Grundeinstellung weiter und
		 * schrumpft die Tagesüberschrift auf Textbreite – text-align hätte dann
		 * nichts mehr auszurichten.
		 */
		align-items: stretch;
	}

	/* Drei Standorte mit 24px Schrift ergäben hier drei Zeilen Reiter. */
	.mykk__reiter {
		gap: 16px;
	}

	.mykk--wiesler .mykk__reiter-knopf {
		font-size: 19px;
		padding-bottom: 7px;
	}

	.mykk__tag {
		margin: 30px 0 11px;
		text-align: left;
	}

	.mykk__raster > .mykk__tag:first-child,
	.mykk__block:first-child .mykk__tag {
		margin-top: 0;
	}

	/* In Tagesblöcken nimmt jede Karte die volle Breite. */
	.mykk__block-karten {
		flex-direction: column;
		gap: 10px;
	}

	.mykk__block-karten > .mykk__karte {
		flex: 1 1 auto;
	}

	/*
	 * Feste Aufteilung statt Umbruchlogik: Kursname und Zeit oben, die
	 * Nebenangaben darunter. Ein Grid, weil sich mit flex-wrap nicht
	 * verlässlich erzwingen lässt, wo die Zeile endet.
	 *
	 *   Samurai Kids I          16:00 – 17:00
	 *   6-10 Jahre                  BÖTZINGEN
	 */
	.mykk__karte,
	.mykk--wiesler .mykk__karte,
	.mykk--provital .mykk__karte {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: .75em;
		row-gap: .5em;
		align-items: baseline;
		text-align: left;
		padding: 16px 18px;
	}

	.mykk__name {
		grid-area: 1 / 1;
	}

	.mykk__zeit {
		grid-area: 1 / 2;
		justify-self: end;
	}

	.mykk__alter {
		grid-area: 2 / 1;
	}

	.mykk__kartenort {
		grid-area: 2 / 2;
		justify-self: end;
	}

	.mykk--wiesler .mykk__name {
		margin: 0;
		font-size: 1.15rem;
	}

	.mykk--wiesler .mykk__zeit {
		margin: 0;
		font-size: 15px;
		font-weight: 700;
	}

	.mykk--wiesler .mykk__alter,
	.mykk--wiesler .mykk__kartenort {
		font-size: 13px;
		opacity: .8;
	}
}

/*
 * Stufe 3 – Telefon hochkant.
 *
 * Hier passen Kursname und Zeit nicht mehr verlässlich nebeneinander:
 * „Samurai Kids I & II“ allein braucht in der Pille rund 170px. Statt zu
 * quetschen oder linksbündig zu stapeln, kehrt die Karte zur Form der breiten
 * Ansicht zurück – zentriert, Angaben untereinander, nur kleiner. Das ist die
 * Darstellung, die Besucher vom Desktop kennen.
 *
 * Die Schwelle deckt die gängigen Telefone ab (SE 375, iPhone 14 390,
 * Pixel 393). Darüber, also ab Tablet hochkant, greift die zweispaltige Karte
 * aus Stufe 2.
 */
@container (max-width: 390px) {
	.mykk__karte,
	.mykk--wiesler .mykk__karte,
	.mykk--provital .mykk__karte {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		row-gap: 0;
		padding: 20px 14px;
	}

	.mykk__alter,
	.mykk__name,
	.mykk__zeit,
	.mykk__kartenort {
		grid-area: auto;
		justify-self: center;
	}

	.mykk__tag {
		text-align: center;
		margin: 30px 0 13px;
	}

	.mykk__reiter {
		gap: 13px;
		margin-bottom: 20px;
	}

	.mykk--wiesler .mykk__reiter-knopf {
		font-size: 17px;
	}

	/* Abstände wie in der breiten Ansicht, nur enger gefasst. */
	.mykk--wiesler .mykk__name {
		margin: 5px 0;
		font-size: 1.2rem;
	}

	.mykk--wiesler .mykk__zeit {
		margin: 0 0 10px;
		font-size: 15px;
		font-weight: 500;
	}

	.mykk--wiesler .mykk__alter,
	.mykk--wiesler .mykk__kartenort {
		font-size: 14px;
		opacity: 1;
	}
}