/*
 * 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;
}

/* ---------------------------------------------------------- Studio-App */

/*
 * Hinweis auf die Studio-App über dem Plan (includes/app.php).
 * Aufbau: Symbol | Text mit Store-Badges | QR-Code. Die Farben hängen an
 * Variablen, das Grundlayout ist hell; der ProVital-Skin stellt auf dunkel.
 */
.mykk {
	--mykk-app-bg: rgba(0, 0, 0, .04);
	--mykk-app-rahmen: var(--mykk-rahmen);
	--mykk-app-farbe: inherit;
	--mykk-app-balken: var(--mykk-akzent, currentColor);
	--mykk-app-gedaempft: .75;
}

.mykk-app {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 36px;
	align-items: center;
	margin: 0 0 56px;
	padding: 36px 40px 36px 44px;
	border: var(--mykk-app-rahmen);
	border-radius: var(--mykk-radius);
	background: var(--mykk-app-bg);
	color: var(--mykk-app-farbe);
}

/* Farbbalken links, wie ihn die Kurskarten tragen. */
.mykk-app::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: var(--mykk-app-balken);
	border-radius: var(--mykk-radius) 0 0 var(--mykk-radius);
}

.mykk-app__icon {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 22px;
	object-fit: cover;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.mykk-app__name {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--mykk-app-balken);
}

.mykk-app__titel {
	margin: 0 0 8px;
	font-size: 26px;
	line-height: 1.15;
	font-weight: 600;
	color: inherit;
	text-transform: none;
}

.mykk-app__absatz {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.4;
	max-width: 640px;
}

.mykk-app__hinweis {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.4;
	opacity: var(--mykk-app-gedaempft);
}

.mykk-app__stores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.mykk-app__badge {
	display: inline-block;
	line-height: 0;
}

.mykk-app__badge img {
	display: block;
	height: 40px;
	width: auto;
}

/* Das Google-Badge bringt einen eigenen durchsichtigen Rand mit. */
.mykk-app__badge--android img {
	height: 48px;
	margin: -4px 0;
}

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

.mykk-app__qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	opacity: var(--mykk-app-gedaempft);
}

.mykk-app__qr img {
	display: block;
	width: 124px;
	height: 124px;
	padding: 6px;
	background: #fff;
	border-radius: 4px;
}

/* Nur für angemeldete Bearbeiter vor dem Stichtag. */
.mykk-app__vorschau {
	margin: 0 0 12px;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.4;
	background: #ffe9a8;
	color: #1c1d21;
	border-radius: 4px;
}

/* ------------------------------------------------------------- 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;
}

/* Studio-App-Karte auf dem dunklen Grund der Kursplan-Sektion. */
.mykk--provital {
	--mykk-app-bg: rgba(255, 255, 255, .05);
	--mykk-app-rahmen: 1px solid rgba(255, 255, 255, .12);
	--mykk-app-farbe: #fff;
	--mykk-app-balken: #F9DA78;
}

/* Balkenbreite wie bei den Kurskarten. */
.mykk--provital .mykk-app::before {
	width: 10px;
}


/* =====================================================================
 * 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;
	}

	/* Studio-App: kompakter, der QR-Code bleibt. */
	.mykk-app {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		gap: 24px;
		padding: 28px 28px 28px 32px;
	}

	.mykk-app__icon {
		width: 72px;
		height: 72px;
		border-radius: 16px;
	}

	.mykk-app__titel {
		font-size: 22px;
	}

	.mykk-app__qr img {
		width: 104px;
		height: 104px;
	}
}

/*
 * 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;
	}

	/* Studio-App: ohne QR-Code – wer hier liest, hat das Handy schon in der Hand. */
	.mykk-app {
		grid-template-columns: 64px minmax(0, 1fr);
		margin-bottom: 40px;
	}

	.mykk-app__qr {
		display: none;
	}

	.mykk-app__icon {
		width: 64px;
		height: 64px;
		border-radius: 14px;
	}
}

/*
 * 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;
	}

	/* Studio-App: alles untereinander. */
	.mykk-app {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 24px 20px 24px 26px;
	}

	.mykk-app__titel {
		font-size: 21px;
	}

	.mykk-app__absatz {
		font-size: 16px;
	}
}