/* Dojo Ronin – Kalender. Farben und Maße kommen als Variablen aus der Vorlage (Kalender gestalten). */

.drk {
	--drk-accent: #5e2028;
	--drk-text: #2f3a48;
	--drk-muted: #6b7684;
	--drk-card: #fff;
	--drk-border: #e3e6ea;
	--drk-radius: 10px;
	--drk-gap: 20px;
	--drk-cols: 3;
	--drk-cols-m: 1;
	--drk-scale: 1;
	--drk-ratio: 16 / 9;
	--drk-soft: color-mix(in srgb, var(--drk-accent) 9%, transparent);
	container: drk / inline-size;
	color: var(--drk-text);
	font-size: calc(1em * var(--drk-scale));
	line-height: 1.5;
	margin: 0 0 1.5em;
}
.drk *, .drk *::before, .drk *::after { box-sizing: border-box; }
.drk a { color: inherit; }
.drk h3 { margin: 0; padding: 0; border: 0; }
.drk p { margin: 0; }

/* ---------------------------------------------------------------- Kopfzeile */

.drk-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: calc(var(--drk-gap) * .9); }
.drk-views, .drk-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.drk-views { padding: 3px; border: 1px solid var(--drk-border); border-radius: 999px; background: var(--drk-card); }
.drk-views a { padding: .35em 1em; border-radius: 999px; text-decoration: none; font-size: .9em; color: var(--drk-muted); }
.drk-views a:hover { color: var(--drk-text); }
.drk-views a.is-active { background: var(--drk-accent); color: #fff; }
.drk-filter a { display: inline-flex; align-items: center; gap: .45em; padding: .35em .9em; border: 1px solid var(--drk-border); border-radius: 999px; text-decoration: none; font-size: .9em; background: var(--drk-card); }
.drk-filter a i { width: .6em; height: .6em; border-radius: 50%; background: var(--drk-c, var(--drk-accent)); }
.drk-filter a:hover { border-color: var(--drk-c, var(--drk-accent)); }
.drk-filter a.is-active { background: var(--drk-c, var(--drk-accent)); border-color: var(--drk-c, var(--drk-accent)); color: #fff; }
.drk-filter a.is-active i { background: #fff; }
.drk-search { display: flex; gap: 6px; margin-left: auto; }
.drk-search input { padding: .4em .7em; border: 1px solid var(--drk-border); border-radius: calc(var(--drk-radius) * .6); font: inherit; font-size: .9em; min-width: 12em; }
.drk-search button { padding: .4em .9em; border: 0; border-radius: calc(var(--drk-radius) * .6); background: var(--drk-accent); color: #fff; font: inherit; font-size: .9em; cursor: pointer; }

.drk-month-head { font-size: 1.05em !important; font-weight: 700; color: var(--drk-muted); text-transform: uppercase; letter-spacing: .06em; margin: calc(var(--drk-gap) * 1.2) 0 calc(var(--drk-gap) * .6) !important; }
.drk-month-head:first-of-type { margin-top: 0 !important; }
.drk-empty { padding: 1.5em; text-align: center; color: var(--drk-muted); border: 1px dashed var(--drk-border); border-radius: var(--drk-radius); }

/* ------------------------------------------------------------- Bausteine */

.drk-item { position: relative; background: var(--drk-card); border: 1px solid var(--drk-border); border-radius: var(--drk-radius); }
.drk-shadow .drk-item { box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 14px rgba(0, 0, 0, .06); }
.drk-item.is-featured { border-color: var(--drk-accent); box-shadow: 0 0 0 1px var(--drk-accent); }
.drk-item.is-canceled .drk-title a, .drk-item.is-canceled .drk-c-title { text-decoration: line-through; opacity: .7; }

.drk-body { display: flex; flex-direction: column; gap: .45em; padding: 1em 1.1em 1.1em; min-width: 0; }

.drk-img { display: block; aspect-ratio: var(--drk-ratio); overflow: hidden; background: var(--drk-soft); }
.drk-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.drk-item:hover .drk-img img { transform: scale(1.03); }
.drk-img { text-decoration: none !important; }
.drk-ph { display: flex; align-items: flex-end; justify-content: flex-end; height: 100%; min-height: 5em; padding: .8em 1em; color: color-mix(in srgb, var(--drk-c, var(--drk-accent)) 55%, #fff); font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--drk-c, var(--drk-accent)) 30%, transparent) 0 22%, transparent 22.5%), linear-gradient(135deg, var(--drk-c, var(--drk-accent)), color-mix(in srgb, var(--drk-c, var(--drk-accent)) 70%, #000)); }

.drk-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; align-self: flex-start; min-width: 3.9em; padding: .35em .55em .4em; border-radius: calc(var(--drk-radius) * .7); background: var(--drk-accent); color: #fff; line-height: 1.1; text-align: center; }
.drk-date-wd, .drk-date-m { font-size: .72em; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.drk-date-d { font-size: 1.45em; font-weight: 700; white-space: nowrap; }
.drk-date-text { color: var(--drk-accent); font-weight: 700; font-size: .92em; }

.drk-title { font-size: 1.15em !important; line-height: 1.3 !important; font-weight: 700; }
.drk-title a { text-decoration: none; color: var(--drk-text); }
.drk-title a:hover { color: var(--drk-accent); }

.drk-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.drk-cat { display: inline-flex; align-items: center; gap: .4em; font-size: .75em; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.drk-cat i { display: none; }
.drk-cat-band .drk-cat { padding: .2em .65em; border-radius: 999px; background: var(--drk-c, var(--drk-accent)); color: #fff; }
.drk-cat-punkt .drk-cat { color: var(--drk-muted); }
.drk-cat-punkt .drk-cat i { display: inline-block; width: .65em; height: .65em; border-radius: 50%; background: var(--drk-c, var(--drk-accent)); }
.drk-cat-text .drk-cat { color: var(--drk-c, var(--drk-accent)); }

.drk-meta { color: var(--drk-muted); font-size: .92em; }
.drk-meta { display: flex; align-items: flex-start; gap: .45em; }
.drk-ico { flex: none; width: 1em; height: 1em; margin-top: .22em; opacity: .75; }
.drk-seats { font-weight: 600; color: #2e7d32; }
.drk-seats.is-few { color: #b26a00; }
.drk-seats.is-full { color: #b3261e; }
.drk-status { padding: .4em .7em; border-radius: calc(var(--drk-radius) * .5); background: #fdecea; color: #8c1d18; font-size: .9em; }
.drk-status-postponed { background: #fff4e5; color: #7a4a00; }
.drk-excerpt { color: var(--drk-muted); font-size: .93em; }

.drk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: .5em; }
.drk-btn { display: inline-flex; align-items: center; gap: .3em; padding: .5em 1em; border: 1.5px solid var(--drk-accent); border-radius: calc(var(--drk-radius) * .6); font-size: .9em; font-weight: 600; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: background .15s, color .15s; }
.drk-btn-voll .drk-btn { background: var(--drk-soft); border-color: transparent; color: var(--drk-accent); }
.drk-btn-voll .drk-btn:hover { background: color-mix(in srgb, var(--drk-accent) 16%, transparent); }
.drk-btn-voll .drk-btn.drk-btn-main, .drk-btn-rahmen .drk-btn.drk-btn-main { background: var(--drk-accent); border-color: var(--drk-accent); color: #fff; }
.drk-btn-voll .drk-btn.drk-btn-main:hover, .drk-btn-rahmen .drk-btn.drk-btn-main:hover { background: color-mix(in srgb, var(--drk-accent) 85%, #000); }
.drk-btn-rahmen .drk-btn { background: transparent; color: var(--drk-accent); }
.drk-btn-rahmen .drk-btn:hover { background: var(--drk-soft); }
.drk-btn-link .drk-btn { padding: .2em 0; border: 0; background: none; color: var(--drk-accent); }
.drk-btn-link .drk-btn::after { content: "›"; }
.drk-btn-link .drk-btn:hover { text-decoration: underline !important; }
.drk-closed { font-size: .88em; color: var(--drk-muted); font-style: italic; }

/* ------------------------------------------------------------------ Karten */

.drk--karten .drk-items { display: grid; gap: var(--drk-gap); grid-template-columns: repeat(auto-fill, minmax(max(15em, calc((100% - (var(--drk-cols) - 1) * var(--drk-gap)) / var(--drk-cols))), 1fr)); }
.drk-karten-item { display: flex; flex-direction: column; overflow: hidden; }
.drk-karten-item .drk-body { flex: 1; }
/* Datum direkt nach dem Bild: als Kachel auf das Bild legen. */
.drk-date-kachel .drk-karten-item > .drk-img + .drk-body > .drk-date:first-child { position: absolute; top: 12px; left: 12px; background: var(--drk-card); color: var(--drk-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }

/* ------------------------------------------------------------------ Liste */

.drk--liste .drk-items { display: flex; flex-direction: column; gap: var(--drk-gap); }
.drk-liste-item { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; overflow: hidden; }
.drk-liste-item .drk-side { padding: 1em 0 1em 1.1em; }
.drk-liste-item .drk-date { min-width: 4.6em; }
.drk-liste-item .drk-thumb { width: 14em; }
.drk-liste-item .drk-thumb .drk-img { height: 100%; aspect-ratio: auto; min-height: 8em; }
.drk-liste-item .drk-actions { margin-top: .2em; }

/* ---------------------------------------------------------------- Kompakt */

.drk--kompakt .drk-items { border: 1px solid var(--drk-border); border-radius: var(--drk-radius); overflow: hidden; background: var(--drk-card); }
.drk--kompakt .drk-item { border: 0; border-radius: 0; box-shadow: none; }
.drk-kompakt-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em 1em; padding: .7em 1em; border-bottom: 1px solid var(--drk-border) !important; border-left: 4px solid var(--drk-c, var(--drk-accent)) !important; }
.drk-kompakt-item:last-child { border-bottom: 0 !important; }
.drk-c-date { font-weight: 700; color: var(--drk-accent); min-width: 6.5em; font-variant-numeric: tabular-nums; }
.drk-c-time { color: var(--drk-muted); font-size: .9em; min-width: 7.5em; font-variant-numeric: tabular-nums; }
.drk-c-title { flex: 1 1 14em; font-weight: 600; text-decoration: none; }
.drk-c-title:hover { color: var(--drk-accent); }
.drk-c-place { color: var(--drk-muted); font-size: .9em; }
.drk-kompakt-item .drk-status { padding: .1em .5em; font-size: .8em; }
.drk-kompakt-item .drk-cats { font-size: .9em; }

/* ------------------------------------------------------------------ Monat */

.drk-month-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.drk-month-title { font-size: 1.3em !important; font-weight: 700; min-width: 9em; text-align: center; }
.drk-nav { display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; border: 1px solid var(--drk-border); border-radius: 50%; text-decoration: none; font-size: 1.1em; background: var(--drk-card); }
.drk-nav:hover { border-color: var(--drk-accent); color: var(--drk-accent); }
.drk-today { margin-left: auto; padding: .3em .9em; border: 1px solid var(--drk-border); border-radius: 999px; font-size: .88em; text-decoration: none; }
.drk-grid { border: 1px solid var(--drk-border); border-radius: var(--drk-radius); overflow: hidden; background: var(--drk-card); }
.drk-shadow .drk-grid { box-shadow: 0 4px 14px rgba(0, 0, 0, .05); }
.drk-grid-head, .drk-grid-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.drk-grid-head div { padding: .5em; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--drk-muted); text-align: center; border-bottom: 1px solid var(--drk-border); }
.drk-day { min-height: 6.5em; padding: .35em; border-right: 1px solid var(--drk-border); border-bottom: 1px solid var(--drk-border); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.drk-day:nth-child(7n) { border-right: 0; }
.drk-day.is-other { background: color-mix(in srgb, var(--drk-border) 25%, transparent); }
.drk-day.is-other .drk-day-n { opacity: .45; }
.drk-day-n { font-size: .85em; font-weight: 600; color: var(--drk-muted); align-self: flex-end; min-width: 1.8em; height: 1.8em; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.drk-day.is-today .drk-day-n { background: var(--drk-accent); color: #fff; padding: 0 .4em; }
.drk-day-wd { display: none; }
.drk-ev { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding: .2em .45em; border-left: 3px solid var(--drk-c, var(--drk-accent)); border-radius: 3px; background: color-mix(in srgb, var(--drk-c, var(--drk-accent)) 12%, transparent); font-size: .78em; line-height: 1.3; text-decoration: none; overflow: hidden; overflow-wrap: break-word; hyphens: auto; }
.drk-ev:hover { background: var(--drk-c, var(--drk-accent)); color: #fff; }
.drk-ev.is-cont { opacity: .75; }
.drk-ev.is-canceled { text-decoration: line-through; opacity: .6; }
.drk--monat .drk-empty { margin-top: 12px; }

/* -------------------------------------------------------------- Seitenleiste */

.drk-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: calc(var(--drk-gap) * 1.2); color: var(--drk-muted); font-size: .9em; }

/* ------------------------------------------------------------- Terminseite */

.drk-single { padding: 1.2em 1.3em; border: 1px solid var(--drk-border); border-radius: var(--drk-radius); background: var(--drk-card); display: flex; flex-direction: column; gap: 1em; }
.drk-single.drk-shadow { box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.drk-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); gap: .9em 1.5em; margin: 0; }
.drk-fact dt { font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--drk-muted); margin: 0 0 .15em; }
.drk-fact dd { margin: 0; }
.drk-fact a { color: var(--drk-accent); }
.drk-single .drk-actions { padding-top: 0; }
.drk-back { align-self: flex-start; font-size: .9em; color: var(--drk-muted) !important; text-decoration: none; }
.drk-back:hover { color: var(--drk-accent) !important; }

/* --------------------------------------------------------- Mittlere Breite */

@container drk (max-width: 720px) {
	.drk-liste-item .drk-thumb { width: 9em; }
	.drk-search { margin-left: 0; width: 100%; }
	.drk-search input { flex: 1; min-width: 0; }
	.drk-day { min-height: 5em; }
	.drk-ev { font-size: .7em; }
}

/* ------------------------------------------------------------------ Handy */

@container drk (max-width: 560px) {
	.drk-toolbar { gap: 8px; }
	.drk-views { width: 100%; justify-content: space-between; }
	.drk-views a { flex: 1; text-align: center; padding: .4em .5em; }
	.drk-filter { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
	.drk-filter a { flex: none; }

	.drk--karten .drk-items { grid-template-columns: repeat(var(--drk-cols-m), minmax(0, 1fr)); gap: calc(var(--drk-gap) * .7); }

	/* Liste: Bild weg, Datum links. */
	.drk-liste-item { grid-template-columns: auto 1fr; }
	.drk-liste-item .drk-thumb { display: none; }
	.drk-liste-item .drk-side { padding: .9em 0 .9em .9em; }
	.drk-liste-item .drk-body { padding: .9em; }

	/* Karten als Liste: kleines Bild links. */
	.drk-m-liste .drk--karten .drk-items, .drk-m-liste.drk--karten .drk-items { grid-template-columns: 1fr; }
	/* Nur mit Bild zweispaltig – ohne Bild bekäme sonst der Text die schmale Bildspalte. */
	.drk-m-liste .drk-karten-item.has-img { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); }
	.drk-m-liste .drk-karten-item > .drk-img { aspect-ratio: auto; height: 100%; min-height: 6.5em; }
	.drk-m-liste .drk-karten-item .drk-body { padding: .75em .9em; }
	.drk-m-liste .drk-karten-item .drk-excerpt { display: none; }
	.drk-m-liste.drk-date-kachel .drk-karten-item > .drk-img + .drk-body > .drk-date:first-child { top: 8px; left: 8px; font-size: .8em; }

	/* Karten kompakt: nur Datum, Titel und Angaben. */
	.drk-m-kompakt.drk--karten .drk-items { grid-template-columns: 1fr; gap: 8px; }
	.drk-m-kompakt .drk-karten-item > .drk-img, .drk-m-kompakt .drk-karten-item .drk-excerpt, .drk-m-kompakt .drk-karten-item .drk-actions { display: none; }
	.drk-m-kompakt .drk-karten-item .drk-body { display: grid; grid-template-columns: auto 1fr; column-gap: .9em; row-gap: .2em; padding: .75em .9em; }
	.drk-m-kompakt .drk-karten-item .drk-body > * { grid-column: 2; }
	.drk-m-kompakt .drk-karten-item .drk-body > .drk-date { grid-column: 1; grid-row: 1 / span 8; position: static !important; box-shadow: none !important; }

	/* Monat wird zur Tagesliste. */
	.drk-grid { border: 0; background: none; box-shadow: none !important; border-radius: 0; }
	.drk-grid-head { display: none; }
	.drk-grid-body { display: flex; flex-direction: column; gap: 8px; }
	.drk-day { min-height: 0; padding: .6em .8em; border: 1px solid var(--drk-border); border-radius: calc(var(--drk-radius) * .7); background: var(--drk-card); }
	.drk-day.is-empty, .drk-day.is-other { display: none; }
	.drk-day-n { display: block; align-self: flex-start; height: auto; font-size: .85em; color: var(--drk-text); }
	.drk-day.is-today .drk-day-n { padding: .1em .6em; }
	.drk-day-wd { display: inline; }
	.drk-ev { font-size: .92em; padding: .35em .6em; -webkit-line-clamp: 3; }
	.drk-month-title { min-width: 0; flex: 1; font-size: 1.1em !important; }
	.drk-today { margin-left: 0; }

	.drk-kompakt-item { gap: .1em .8em; }
	.drk-c-date { min-width: 0; }
	.drk-c-time { min-width: 0; }
	.drk-c-title { flex-basis: 100%; order: 3; }
	.drk-kompakt-item .drk-c-place { order: 4; }

	.drk-pager { flex-wrap: wrap; }
}