/* MOOD — Inplay-Kalender
   Der Mini-Kalender der Startseite steht in mood.index.css (.md-cal).
   Hier liegt nur, was die Kalenderseite und das Tagesblatt zusaetzlich
   brauchen: klickbare Tageszellen, Legende, Formular und das Modal. */

/* ============================================================
   Seitenkopf und Leiste
   ============================================================ */
.md-calpage__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem clamp(1rem, 3vw, 2rem);
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
	padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
	border-bottom: 1px solid var(--md-rule-hair);
}
.md-calpage__acts { display: flex; gap: .7rem; }

.md-callegend { display: flex; flex-wrap: wrap; gap: .55rem clamp(1rem, 2.5vw, 1.6rem); }
.md-callegend__i {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-callegend__c { flex: 0 0 auto; width: 7px; height: 7px; }

/* ============================================================
   Monatsraster der Jahresansicht
   ============================================================ */
.md-calgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.md-cal--full .md-cal__month { margin-top: 0; }
.md-cal__year { color: var(--md-ink-faint); }

/* Die Tage der Jahresansicht sind Schaltflaechen: Ziffer oben,
   darunter die Punkte der Eintraege. */
.md-cal--full .md-cal__d {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	min-height: 2.7rem;
	padding: .45rem .1rem .35rem;
	cursor: pointer;
	transition: color var(--md-dur) var(--md-ease), box-shadow var(--md-dur) var(--md-ease);
}
.md-cal--full .md-cal__d:hover { color: var(--md-ink-bright); box-shadow: inset 0 0 0 1px var(--md-rule-hair); }
.md-cal--full .md-cal__d:focus-visible { outline: 1px solid var(--md-accent-soft); outline-offset: -1px; }
.md-cal--full .md-cal__d--empty { cursor: default; box-shadow: none; }
.md-cal__n { display: block; font-variant-numeric: tabular-nums; }
.md-cal__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 5px; }
.md-cal__dot { width: 5px; height: 5px; border-radius: 50%; }

/* ============================================================
   Tagesblatt — das Modal zu einem Datum
   ============================================================ */
.md-daybox {
	position: fixed;
	inset: 0;
	z-index: 210;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.md-daybox__veil {
	position: absolute;
	inset: 0;
	background: var(--md-veil);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.md-daybox__sheet {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(40rem, 100%);
	max-height: min(82vh, 46rem);
	background: var(--md-scrim-solid);
	border: 1px solid var(--md-rule-soft);
	box-shadow: 0 30px 80px rgb(0 0 0 / .45);
	font-family: var(--md-f-sans);
	font-size: var(--md-t-body);
	line-height: 1.85;
	color: var(--md-ink);
}
.md-daybox__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
	border-bottom: 1px solid var(--md-rule-hair);
}
.md-daybox__date {
	margin: 0;
	font-family: var(--md-f-serif);
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: var(--md-ls-display);
	text-transform: uppercase;
	color: var(--md-ink-bright);
	font-variant-numeric: tabular-nums;
}
.md-daybox__wd {
	margin: .4rem 0 0;
	font-size: var(--md-t-micro);
	line-height: 1;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-daybox__x {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: 1px solid var(--md-rule-hair);
	cursor: pointer;
	transition: border-color var(--md-dur) var(--md-ease);
}
.md-daybox__x::before,
.md-daybox__x::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 11px; height: 1px;
	background: var(--md-ink-dim);
	transition: background-color var(--md-dur) var(--md-ease);
}
.md-daybox__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.md-daybox__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.md-daybox__x:hover { border-color: var(--md-rule-soft); }
.md-daybox__x:hover::before,
.md-daybox__x:hover::after { background: var(--md-ink-bright); }

.md-daybox__body {
	display: grid;
	gap: clamp(1.25rem, 3vw, 1.75rem);
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3.5vw, 2.25rem);
	overflow-y: auto;
}

/* Ein Eintrag — die Kategoriefarbe traegt nur die Kante. */
.md-daybox__e {
	padding-left: clamp(.9rem, 2vw, 1.25rem);
	border-left: 2px solid var(--md-daybox-mark, var(--md-rule-soft));
}
.md-daybox__k {
	margin: 0;
	font-size: var(--md-t-kicker);
	line-height: 1.4;
	letter-spacing: var(--md-ls-kicker);
	text-indent: var(--md-ls-kicker);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-daybox__t {
	margin: .4rem 0 0;
	font-family: var(--md-f-serif);
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.3;
	letter-spacing: var(--md-ls-head);
	text-transform: uppercase;
	color: var(--md-ink-bright);
}
.md-daybox__t a { transition: color var(--md-dur) var(--md-ease); }
.md-daybox__t a:hover { color: var(--md-accent-soft); }
.md-daybox__d { margin: .55rem 0 0; color: var(--md-ink-dim); }
.md-daybox__d a { color: var(--md-ink); border-bottom: 1px solid var(--md-rule-hair); }
.md-daybox__d a:hover { color: var(--md-ink-bright); border-bottom-color: var(--md-rule); }
.md-daybox__m {
	margin: .55rem 0 0;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
	font-variant-numeric: tabular-nums;
}
.md-daybox__a { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .5rem 0 0; }
.md-daybox__a a {
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
	transition: color var(--md-dur) var(--md-ease);
}
.md-daybox__a a:hover { color: var(--md-ink); }
.md-daybox__d:empty,
.md-daybox__a:empty { display: none; }
.md-daybox__none { margin: 0; color: var(--md-ink-dim); }

/* Die aufklappbare Beschreibung baut das Plugin selbst. */
.event-description-collapse { margin: 0; }
.event-description-toggle {
	display: inline-block;
	list-style: none;
	cursor: pointer;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
	transition: color var(--md-dur) var(--md-ease);
}
.event-description-toggle::-webkit-details-marker { display: none; }
.event-description-toggle::before { content: "+ "; }
.event-description-collapse[open] > .event-description-toggle::before { content: "\2013 "; }
.event-description-toggle:hover { color: var(--md-ink); }
.event-description-body { margin-top: .5rem; color: var(--md-ink-dim); }

/* ============================================================
   Formular und Meldungen
   ============================================================ */
.md-calform { display: grid; gap: 1.1rem; max-width: 44rem; margin: 0; }
.md-calform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.1rem; }
.md-calform .md-form__foot { justify-content: flex-end; gap: .7rem; }
.md-calform textarea.md-form__i { resize: vertical; min-height: 8rem; line-height: 1.8; }

.md-calmsg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
	padding: clamp(.9rem, 2.5vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
	border: 1px solid var(--md-rule-hair);
	color: var(--md-ink-dim);
}
.md-calmsg p { margin: 0; }
.md-calmsg--error { border-color: var(--md-accent-soft); }

/* ============================================================
   Schmale Fenster
   ============================================================ */
@media (max-width: 760px) {
	.md-calgrid { grid-template-columns: minmax(0, 1fr); }
	.md-calpage__bar { align-items: flex-start; }
	.md-daybox { padding: 0; }
	.md-daybox__sheet { width: 100%; max-height: 100vh; height: 100%; border: 0; }
}