/*
 * Dojo Ronin – Trainingsplan
 * Alle Regeln hängen an .drtp, damit Theme-Regeln (Hestia: Großbuchstaben-Buttons, Listenpunkte,
 * Überschriftengrößen, Linkfarben) die Stundentafel nicht verändern.
 */
.drtp {
	--drtp-accent: #5e2028;
	--drtp-text: #1f2933;
	--drtp-muted: #5f6b7a;
	--drtp-line: #e1e5ea;
	--drtp-line-strong: #c5ccd5;
	--drtp-subtle: #f6f7f9;
	--drtp-axis: 44px;     /* Spalte mit den Uhrzeiten */
	--drtp-col: 92px;      /* Mindestbreite einer Tagesspalte */
	container-type: inline-size;
	margin: 0 0 2em;
	color: var(--drtp-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
}
.drtp *, .drtp *::before, .drtp *::after { box-sizing: border-box; }
.drtp [hidden] { display: none !important; }
.drtp .drtp-sr {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Farben je Gruppe bzw. Angebot */
.drtp .drtp-c-bonsai { --c: #2e7031; }
.drtp .drtp-c-kinder { --c: #1d5a9e; }
.drtp .drtp-c-erwachsene { --c: var(--drtp-accent); }
.drtp .drtp-c-kader { --c: #8f4f00; }
.drtp .drtp-c-kobudo { --c: #3d4756; }
.drtp .drtp-c-event { --c: #6a3d9a; }

.drtp a:focus-visible, .drtp button:focus-visible, .drtp select:focus-visible {
	outline: 3px solid var(--drtp-accent); outline-offset: 2px;
}

/* ---------- Kopf ---------- */
.drtp .drtp-head { margin: 0 0 14px; }
.drtp .drtp-title { margin: 0 0 2px; padding: 0; font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--drtp-text); text-align: left; }
.drtp .drtp-valid { margin: 0; font-size: 15px; font-style: italic; color: var(--drtp-muted); }
.drtp .drtp-hint { margin: 0 0 8px; font-size: 13px; color: var(--drtp-muted); }

/* ---------- Wochen blättern ---------- */
.drtp .drtp-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.drtp .drtp-navlabel { min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.drtp button.drtp-navbtn, .drtp button.drtp-today {
	display: inline-flex; align-items: center; justify-content: center; height: 36px; margin: 0; padding: 0 12px;
	font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: normal; text-transform: none;
	color: var(--drtp-text); background: #fff; border: 1px solid var(--drtp-line-strong); border-radius: 8px; box-shadow: none; cursor: pointer;
}
.drtp button.drtp-navbtn { width: 36px; padding: 0; font-size: 22px; }
.drtp button.drtp-navbtn:hover, .drtp button.drtp-today:hover { border-color: var(--drtp-accent); color: var(--drtp-text); background: #fff; box-shadow: none; }
.drtp button.drtp-navbtn:disabled { opacity: .35; cursor: default; border-color: var(--drtp-line-strong); }
.drtp button.drtp-today { margin-left: auto; }
.drtp button.drtp-today.is-current { color: var(--drtp-muted); }
.drtp .drtp-wtitle { margin: 18px 0 8px; padding: 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--drtp-text); }
.drtp.is-js .drtp-wtitle { display: none; }

/* ---------- Filter ---------- */
.drtp .drtp-filters {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 26px;
	margin: 0 0 12px; padding: 14px 16px;
	background: var(--drtp-subtle); border: 1px solid var(--drtp-line); border-radius: 12px;
}
.drtp .drtp-fgroup { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.drtp .drtp-flabel {
	display: block; margin: 0; padding: 0; font-size: 12px; font-weight: 700; line-height: 1.2;
	letter-spacing: .06em; text-transform: uppercase; color: var(--drtp-muted);
}
.drtp .drtp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.drtp button.drtp-chip {
	display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 14px;
	font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: normal; text-transform: none;
	color: var(--drtp-text); background: #fff; border: 1px solid var(--drtp-line-strong); border-radius: 999px;
	box-shadow: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; white-space: nowrap;
}
.drtp button.drtp-chip:hover { border-color: var(--drtp-accent); color: var(--drtp-text); background: #fff; box-shadow: none; }
.drtp button.drtp-chip[aria-pressed="true"],
.drtp button.drtp-chip[aria-pressed="true"]:hover { background: var(--drtp-accent); border-color: var(--drtp-accent); color: #fff; }
.drtp .drtp-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.drtp button.drtp-chip[aria-pressed="true"] .drtp-dot { box-shadow: 0 0 0 2px #fff; }
.drtp select.drtp-select {
	display: block; width: auto; min-width: 200px; max-width: 100%; height: 36px; margin: 0; padding: 0 36px 0 12px;
	font-family: inherit; font-size: 14px; font-weight: 500; line-height: 34px; color: var(--drtp-text);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px;
	border: 1px solid var(--drtp-line-strong); border-radius: 8px; box-shadow: none;
	appearance: none; -webkit-appearance: none; cursor: pointer;
}
.drtp select.drtp-select.is-set { border-color: var(--drtp-accent); box-shadow: 0 0 0 1px var(--drtp-accent); }
.drtp .drtp-factions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; min-height: 36px; }
.drtp .drtp-count { font-size: 13.5px; color: var(--drtp-muted); }
.drtp .drtp-count.is-empty { color: #b3261e; font-weight: 600; }
.drtp button.drtp-reset {
	margin: 0; padding: 0; font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: normal; text-transform: none;
	color: var(--drtp-accent); background: none; border: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* ---------- Veranstaltungen der Woche (Leiste über dem Plan) ---------- */
.drtp .drtp-band { margin: 0 0 10px; }
.drtp .drtp-band .drtp-lhead {
	margin: 0 0 6px; padding: 0; font-family: inherit; font-size: 12px; line-height: 1.3; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--drtp-muted); text-align: left;
}
.drtp .drtp-band-items { display: flex; flex-wrap: wrap; gap: 8px; }
.drtp .drtp-band a.drtp-slot { flex: 1 1 220px; max-width: 360px; }

/* ---------- Wochenplan: Zeilen nach Beginnzeit, Spalten nach Tagen ---------- */
.drtp .drtp-grid {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	background: #fff; border: 1px solid var(--drtp-line); border-radius: 12px;
}
.drtp .drtp-table {
	display: grid; position: relative; grid-auto-rows: auto;
	min-width: calc(var(--drtp-axis) + var(--drtp-width, 6) * var(--drtp-col));
}
.drtp .drtp-corner, .drtp .drtp-dayhead { background: var(--drtp-subtle); border-bottom: 2px solid var(--drtp-line); }
.drtp .drtp-dayhead { padding: 8px 4px; border-left: 1px solid var(--drtp-line); font-size: 14.5px; font-weight: 700; line-height: 1.25; text-align: center; }
.drtp .drtp-date { display: block; font-size: 12.5px; font-weight: 500; color: var(--drtp-muted); }
.drtp .drtp-dayhead.is-today { color: var(--drtp-accent); box-shadow: inset 0 -3px 0 var(--drtp-accent); }
.drtp .drtp-hour {
	position: relative; padding: 0 8px 0 0; border-top: 1px solid var(--drtp-line);
	font-size: 12px; font-weight: 600; line-height: 1; text-align: right; color: var(--drtp-muted); font-variant-numeric: tabular-nums;
}
/* Uhrzeit sitzt auf der Linie, an der die Zeile beginnt. */
.drtp .drtp-hour { transform: translateY(-.5em); border-top-color: transparent; background: linear-gradient(var(--drtp-line), var(--drtp-line)) no-repeat right 0 top .5em / 6px 1px; padding-right: 10px; }
.drtp .drtp-bg { min-height: 34px; border-top: 1px solid var(--drtp-line); border-left: 1px solid var(--drtp-line); }
.drtp .drtp-bg.is-gap { min-height: 18px; background: repeating-linear-gradient(-45deg, #f3f4f6 0 5px, #fff 5px 10px); }
.drtp .drtp-bg.is-end { min-height: 14px; }
.drtp .drtp-bg.is-today { background-color: rgba(94, 32, 40, .035); }
.drtp .drtp-day { display: contents; }
.drtp .drtp-day .drtp-lhead { display: none; }
.drtp .drtp-cell { z-index: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 3px 2px; }
.drtp .drtp-cell a.drtp-slot { padding: 5px 6px; }
.drtp .drtp-cell .drtp-time { white-space: nowrap; font-size: 11.5px; }
.drtp .drtp-cell > a.drtp-slot { flex: 1 1 auto; }
.drtp .drtp-cell.is-lane a.drtp-slot { padding: 4px 5px; font-size: 11.5px; hyphens: auto; -webkit-hyphens: auto; }
.drtp .drtp-cell.is-lane .drtp-name { font-size: 12px; }
.drtp .drtp-cell.is-lane .drtp-time { white-space: normal; font-size: 11px; }
.drtp .drtp-empty { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 28px 16px; text-align: center; color: var(--drtp-muted); font-size: 15px; }

/* ---------- Eintrag (Training oder Veranstaltung) ---------- */
.drtp a.drtp-slot {
	position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0;
	padding: 6px 8px; margin: 0;
	font-size: 13px; line-height: 1.3; color: var(--drtp-text); text-decoration: none; text-align: left;
	background: #fff; background: color-mix(in srgb, var(--c) 9%, #fff);
	border: 1px solid rgba(0, 0, 0, .06); border-left: 4px solid var(--c); border-radius: 8px;
	hyphens: manual; overflow-wrap: break-word; word-break: normal;
	transition: background-color .15s, box-shadow .15s, opacity .2s, filter .2s;
}
.drtp a.drtp-slot:hover, .drtp a.drtp-slot:focus-visible {
	color: var(--drtp-text); text-decoration: none;
	background: color-mix(in srgb, var(--c) 17%, #fff); box-shadow: 0 3px 10px rgba(16, 24, 40, .14); z-index: 2;
}
.drtp .drtp-time { font-size: 12px; font-weight: 600; color: var(--drtp-muted); font-variant-numeric: tabular-nums; }
.drtp .drtp-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--c); }
.drtp .drtp-star { margin-left: 1px; }
.drtp .drtp-grade { font-style: italic; }
.drtp .drtp-note { font-size: 12px; color: var(--drtp-muted); }
.drtp a.drtp-slot.is-off { opacity: .15; filter: grayscale(1); pointer-events: none; box-shadow: none; }
.drtp a.drtp-slot.is-cancelled { background: repeating-linear-gradient(-45deg, #fff 0 6px, #f4f5f7 6px 12px); border-left-color: #9aa4b0; }
.drtp a.drtp-slot.is-cancelled .drtp-time, .drtp a.drtp-slot.is-cancelled .drtp-name { text-decoration: line-through; color: var(--drtp-muted); }
.drtp .drtp-cancel {
	align-self: flex-start; margin: 1px 0; padding: 1px 6px; border-radius: 4px;
	font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: #b3261e;
}

/* ---------- Liste (schmale Bildschirme): dieselben Einträge, untereinander nach Tagen ---------- */
@container (max-width: 640px) {
	.drtp .drtp-hint { display: none; }
	.drtp .drtp-filters { padding: 12px; gap: 12px; }
	.drtp .drtp-fgroup, .drtp select.drtp-select { width: 100%; }
	.drtp .drtp-factions { margin-left: 0; min-height: 0; }
	.drtp .drtp-navlabel { order: -1; flex: 1 1 100%; }
	.drtp button.drtp-today { margin-left: 0; }

	.drtp .drtp-grid { overflow: visible; background: none; border: 0; border-radius: 0; }
	.drtp .drtp-table { display: block; min-width: 0; }
	.drtp .drtp-corner, .drtp .drtp-dayhead, .drtp .drtp-hour, .drtp .drtp-bg { display: none; }
	.drtp .drtp-empty { padding: 16px 0; text-align: left; }
	.drtp .drtp-band { margin: 0 0 16px; }
	.drtp .drtp-band.is-filtered-empty { display: none; }
	.drtp .drtp-band-items { display: grid; grid-template-columns: minmax(0, 1fr); }
	.drtp .drtp-band a.drtp-slot { max-width: none; }
	.drtp .drtp-day { display: grid; gap: 8px; margin: 0 0 16px; }
	.drtp .drtp-day.is-empty, .drtp .drtp-day.is-filtered-empty { display: none; }
	.drtp .drtp-cell { display: contents; }
	.drtp .drtp-day .drtp-lhead, .drtp .drtp-band .drtp-lhead {
		display: flex; align-items: center; gap: 8px;
		margin: 0; padding: 0 0 6px; border-bottom: 2px solid var(--drtp-line);
		font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--drtp-text);
	}
	.drtp .drtp-day.is-today .drtp-lhead::after {
		content: "heute"; padding: 2px 8px; border-radius: 999px; background: var(--drtp-accent); color: #fff;
		font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	}
	.drtp .drtp-day a.drtp-slot, .drtp .drtp-band a.drtp-slot {
		display: grid; grid-template-columns: 92px 1fr; column-gap: 12px; align-items: start;
		padding: 10px 34px 10px 12px; font-size: 15px;
	}
	.drtp .drtp-band a.drtp-slot { grid-template-columns: 1fr; }
	.drtp .drtp-day a.drtp-slot::after, .drtp .drtp-band a.drtp-slot::after {
		content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-52%);
		font-size: 24px; line-height: 1; color: var(--c);
	}
	.drtp .drtp-day .drtp-time { grid-row: 1 / span 4; padding-top: 2px; font-size: 14px; color: var(--drtp-text); }
	.drtp .drtp-name { font-size: 15px; }
	.drtp .drtp-day .drtp-name, .drtp .drtp-day .drtp-grade, .drtp .drtp-day .drtp-note, .drtp .drtp-day .drtp-cancel { grid-column: 2; }
	.drtp .drtp-cancel { justify-self: start; }
	.drtp .drtp-day .drtp-note { font-size: 13px; }
	.drtp a.drtp-slot.is-off { display: none; }
	/* Einträge aus schmalen Rasterspuren in der Liste wie alle anderen darstellen. */
	.drtp .drtp-cell a.drtp-slot, .drtp .drtp-cell.is-lane a.drtp-slot { padding: 10px 34px 10px 12px; font-size: 15px; hyphens: manual; -webkit-hyphens: manual; }
	.drtp .drtp-cell .drtp-time, .drtp .drtp-cell.is-lane .drtp-time { font-size: 14px; white-space: nowrap; }
	.drtp .drtp-cell .drtp-name, .drtp .drtp-cell.is-lane .drtp-name { font-size: 15px; }
}
@supports not (container-type: inline-size) {
	@media (max-width: 700px) {
		.drtp .drtp-grid { overflow-x: auto; }
	}
}

/* ---------- Hinweise ---------- */
.drtp .drtp-notes { margin: 14px 0 0; }
.drtp .drtp-notes p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--drtp-muted); }

/* ---------- Informationsseite (Fenster bzw. ohne JavaScript als Abschnitt) ---------- */
.drtp .drtp-panel { display: none; margin: 16px 0; overflow: hidden; background: #fff; border: 1px solid var(--drtp-line); border-radius: 12px; }
.drtp .drtp-panel:target { display: block; }
.drtp.is-js .drtp-panels { display: none; }
.drtp .drtp-dialog .drtp-panel { display: block; margin: 0; border: 0; border-radius: 0; }

.drtp .drtp-dialog {
	width: min(640px, calc(100vw - 24px)); max-width: none; max-height: min(88vh, 920px);
	margin: auto; padding: 0; overflow: hidden;
	color: var(--drtp-text); background: #fff; border: 0; border-radius: 14px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}
.drtp .drtp-dialog[open] { display: flex; flex-direction: column; }
.drtp .drtp-dialog::backdrop { background: rgba(17, 24, 39, .55); }
.drtp .drtp-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.drtp button.drtp-close {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0; padding: 0;
	font-family: inherit; font-size: 26px; font-weight: 400; line-height: 1; text-transform: none;
	color: var(--drtp-text); background: rgba(255, 255, 255, .9); border: 1px solid var(--drtp-line); border-radius: 50%;
	box-shadow: none; cursor: pointer;
}
.drtp button.drtp-close:hover { background: #fff; border-color: var(--drtp-line-strong); color: var(--drtp-text); }
html:has(.drtp-dialog[open]) { overflow: hidden; }

.drtp .drtp-phead {
	padding: 22px 64px 16px 24px;
	background: #fff; background: color-mix(in srgb, var(--c) 9%, #fff); border-top: 6px solid var(--c);
}
.drtp .drtp-ptitle { margin: 0 0 10px; padding: 0; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--c); text-align: left; }
.drtp .drtp-ptags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.drtp .drtp-tag {
	display: inline-block; padding: 3px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.4;
	background: #fff; border: 1px solid var(--drtp-line-strong); border-radius: 999px;
}
.drtp .drtp-pbody { padding: 18px 24px 24px; }
.drtp .drtp-notice {
	margin: 0 0 16px; padding: 10px 12px; font-size: 14.5px;
	background: #fff7e6; border-left: 4px solid #d97706; border-radius: 6px;
}
.drtp .drtp-psub {
	margin: 0 0 8px; padding: 0; font-family: inherit; font-size: 12.5px; line-height: 1.3; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--drtp-muted);
}
.drtp ul.drtp-ptimes { margin: 0 0 18px; padding: 0; list-style: none; border: 1px solid var(--drtp-line); border-radius: 10px; overflow: hidden; }
.drtp ul.drtp-ptimes > li {
	display: grid; grid-template-columns: 105px 125px 1fr; gap: 2px 10px; align-items: baseline;
	margin: 0; padding: 8px 12px; list-style: none; font-size: 14.5px; border-top: 1px solid var(--drtp-line);
}
.drtp ul.drtp-ptimes > li::before { content: none; display: none; }
.drtp ul.drtp-ptimes > li:first-child { border-top: 0; }
.drtp ul.drtp-ptimes > li.is-current { background: color-mix(in srgb, var(--c) 11%, #fff); box-shadow: inset 4px 0 0 var(--c); }
.drtp .drtp-pday { font-weight: 700; }
.drtp .drtp-ptime { font-variant-numeric: tabular-nums; }
.drtp .drtp-pgrade { font-style: italic; color: var(--drtp-muted); }
.drtp .drtp-pmeta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 18px; font-size: 14.5px; }
.drtp .drtp-pmeta dt { margin: 0; font-weight: 700; }
.drtp .drtp-pmeta dd { margin: 0; }
.drtp .drtp-content { font-size: 15px; line-height: 1.6; }
.drtp .drtp-content p, .drtp .drtp-content li { font-size: 15px; }
.drtp .drtp-content p { margin: 0 0 .8em; }
.drtp .drtp-content h2, .drtp .drtp-content h3, .drtp .drtp-content h4 { margin: 1.1em 0 .4em; font-size: 16.5px; line-height: 1.35; font-weight: 700; }
.drtp .drtp-content img { max-width: 100%; height: auto; border-radius: 8px; }
.drtp .drtp-plink { margin: 20px 0 0; }
.drtp a.drtp-button {
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
	font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; text-transform: none;
	color: #fff; background: var(--drtp-accent); border-radius: 8px;
}
.drtp a.drtp-button::after { content: "→"; }
.drtp a.drtp-button:hover, .drtp a.drtp-button:focus { color: #fff; text-decoration: none; filter: brightness(1.15); }

@media (max-width: 520px) {
	.drtp .drtp-phead { padding: 18px 56px 14px 18px; }
	.drtp .drtp-pbody { padding: 16px 18px 20px; }
	.drtp ul.drtp-ptimes > li { grid-template-columns: 1fr auto; }
	.drtp .drtp-pgrade { grid-column: 1 / -1; }
}

@media print {
	.drtp .drtp-filters, .drtp .drtp-hint, .drtp .drtp-dialog, .drtp .drtp-panels { display: none !important; }
	.drtp .drtp-grid { overflow: visible; }
	.drtp a.drtp-slot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.drtp a.drtp-slot.is-off { opacity: 1; filter: none; }
}
.drtp ul.drtp-ptimes > li.is-cancelled .drtp-ptime { text-decoration: line-through; }