/**
 * mod_openinghours – Öffnungszeiten-Kalender
 * Design aufbauend auf com_eventday. Hell = Heide Park World, Dunkel = Boo-Crew.
 * Selbst gehostet (nur die Öffnungszeiten-API wird clientseitig geladen).
 */

@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("../fonts/oswald-var-latin.woff2") format("woff2");
}

.moh {
	/* Helles Theme (Heide Park World) */
	--moh-accent: #0057a8;
	--moh-accent-ink: #ffffff;
	--moh-accent-grad: linear-gradient(135deg, #0057a8 0%, #0077cc 100%);
	--moh-ink: #212529;
	--moh-muted: #6c757d;
	--moh-line: #dee2e6;
	--moh-surface: #ffffff;
	--moh-surface-2: #f0f4f8;
	--moh-open: #e7f1ff;          /* geöffnet */
	--moh-open-ink: #0b3d73;
	--moh-note: #f5a623;          /* Eventtag */
	--moh-eventnote: #e64a19;     /* Eventtag mit Hinweis */
	--moh-holiday: #7e57c2;       /* Schulferien (lila) */
	--moh-today-ring: #0057a8;
	--moh-radius: 12px;
	--moh-shadow: 0 1px 4px rgba(0, 0, 0, .08), 0 12px 30px rgba(0, 0, 0, .10);
	--moh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--moh-font-head: var(--moh-font);

	max-width: 900px;
	margin: 1.25rem auto;
	background: var(--moh-surface);
	color: var(--moh-ink);
	border: 1px solid var(--moh-line);
	border-radius: var(--moh-radius);
	overflow: hidden;
	box-shadow: var(--moh-shadow);
	font-family: var(--moh-font);
}
.moh *, .moh *::before, .moh *::after { box-sizing: border-box; }

/* Dunkles Theme (Boo-Crew) */
.moh--dark {
	--moh-accent: #fc9300;
	--moh-accent-ink: #111111;
	--moh-accent-grad: linear-gradient(135deg, #fc9300, #e65c00);
	--moh-ink: #e2e2e2;
	--moh-muted: #9a9a9a;
	--moh-line: #2a2a2a;
	--moh-surface: #1a1a1a;
	--moh-surface-2: #222222;
	--moh-open: #26343f;
	--moh-open-ink: #cfe8ff;
	--moh-note: #29b6f6;
	--moh-eventnote: #ff7043;
	--moh-holiday: #b39ddb;       /* Schulferien */
	--moh-today-ring: #fc9300;
	--moh-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 34px rgba(0, 0, 0, .5);
	--moh-font-head: "Oswald", var(--moh-font);
}

/* ---------- Kopf / Navigation ---------- */
.moh__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: 1rem 1.25rem;
	background: var(--moh-accent-grad);
	color: var(--moh-accent-ink);
}
.moh__title {
	margin: 0;
	font-family: var(--moh-font-head);
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: center;
	color: var(--moh-accent-ink);
}
.moh__btn {
	flex: 0 0 auto;
	width: 2.4rem; height: 2.4rem;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0;
	border-radius: 8px;
	background: rgba(0, 0, 0, .18);
	color: var(--moh-accent-ink);
	font-size: 1.4rem; line-height: 1;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.moh__btn:hover:not(:disabled) { background: rgba(0, 0, 0, .30); transform: translateY(-1px); }
.moh__btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Ort ---------- */
.moh__location {
	padding: .75rem 1rem;
	text-align: center;
	font-weight: 600;
	color: var(--moh-muted);
	border-bottom: 1px solid var(--moh-line);
}
.moh__location:empty { display: none; }

/* ---------- Wochentage ---------- */
.moh__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: var(--moh-line);
	border-bottom: 1px solid var(--moh-line);
	text-align: center;
}
.moh__weekdays span {
	background: var(--moh-surface-2);
	padding: .6rem 0;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--moh-muted);
}

/* ---------- Kalender-Gitter ---------- */
.moh__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: var(--moh-line);
	gap: 1px;
}
.moh__status {
	grid-column: 1 / -1;
	margin: 0;
	padding: 1.5rem;
	text-align: center;
	color: var(--moh-muted);
	background: var(--moh-surface);
}
.moh__status--error { color: #d9534f; }

.moh__day {
	background: var(--moh-surface);
	min-height: 92px;
	padding: .5rem .4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
}
.moh__day--empty { background: var(--moh-surface-2); min-height: 0; }
.moh__num {
	font-size: 1rem;
	font-weight: 700;
	color: var(--moh-ink);
}
.moh__hours {
	font-size: .74rem;
	color: var(--moh-muted);
	text-align: center;
	line-height: 1.25;
}

/* Zustände */
.moh__day.is-open { background: var(--moh-open); }
.moh__day.is-open .moh__hours { color: var(--moh-open-ink); font-weight: 600; }
.moh__day.is-closed .moh__hours { color: var(--moh-muted); }
.moh__day.is-past { opacity: .5; }
.moh__day.is-today { position: relative; }
.moh__day.is-today::after {
	content: "";
	position: absolute; inset: 0;
	border: 2px solid var(--moh-today-ring);
	pointer-events: none;
}

/* Eventtage */
.moh__day.has-holiday { box-shadow: inset 0 -3px 0 var(--moh-holiday); }
@supports (background: color-mix(in srgb, red, blue)) {
	.moh__day.has-holiday { background: color-mix(in srgb, var(--moh-holiday) 15%, var(--moh-surface)); }
	.moh__day.has-holiday.is-open { background: color-mix(in srgb, var(--moh-holiday) 15%, var(--moh-open)); }
}
.moh__day.has-holiday .moh__num { color: var(--moh-holiday); }
.moh__events {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	margin-top: .1rem;
}
.moh__event {
	display: block;
	max-width: 100%;
	background: var(--moh-note);
	color: #1a1200;
	font-size: .66rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	padding: .12rem .3rem;
	border-radius: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.moh__event:hover { text-decoration: none; filter: brightness(.95); }
.moh__event--note { background: var(--moh-eventnote); color: #fff; }

/* ---------- Legende ---------- */
.moh__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: .85rem 1.25rem;
	border-top: 1px solid var(--moh-line);
	font-size: .8rem;
	color: var(--moh-muted);
}
.moh__legend-item { display: flex; align-items: center; gap: .4rem; }
.moh__swatch {
	width: 1rem; height: 1rem;
	border-radius: 4px;
	border: 1px solid var(--moh-line);
	flex: 0 0 auto;
}
.moh__swatch--open { background: var(--moh-open); }
.moh__swatch--closed { background: var(--moh-surface); }
.moh__swatch--event { background: var(--moh-note); border-color: transparent; }
.moh__swatch--eventnote { background: var(--moh-eventnote); border-color: transparent; }
.moh__swatch--holiday { background: var(--moh-holiday); border-color: transparent; }

/* ---------- Klickbare Tage + Detailansicht ---------- */
.moh__day { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, .06); touch-action: manipulation; }
.moh__day--empty { cursor: default; }
.moh__day.is-selected {
	outline: 2px solid var(--moh-accent);
	outline-offset: -2px;
	position: relative;
	z-index: 1;
}

.moh__detail {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--moh-line);
}
.moh__detail-hint { margin: 0; font-size: .85rem; color: var(--moh-muted); }
.moh__detail-date {
	font-family: var(--moh-font-head);
	font-size: 1.05rem; font-weight: 700;
	color: var(--moh-ink);
	margin-bottom: .3rem;
}
.moh__detail-hours { font-size: .95rem; margin: 0 0 .3rem; }
.moh__detail-hours.is-open { color: var(--moh-open-ink); font-weight: 600; }
.moh__detail-hours.is-closed { color: var(--moh-muted); }
.moh__detail-title {
	font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--moh-muted);
	margin: .7rem 0 .3rem;
}
.moh__detail-item { font-size: .9rem; margin-bottom: .25rem; color: var(--moh-ink); }
.moh__detail-link { color: var(--moh-accent); text-decoration: none; font-weight: 600; }
.moh__detail-link:hover { text-decoration: underline; }
.moh__detail-note { display: block; font-size: .82rem; color: var(--moh-muted); margin-top: .1rem; }

/* ---------- Tagesansicht ---------- */
.moh--day { max-width: 420px; }
.moh--day .moh__head--day { justify-content: center; }
.moh--day .moh__detail--day { border-top: 0; }
.moh--day .moh__detail-date { font-size: 1.2rem; }
.moh--day .moh__detail-hours { font-size: 1.05rem; }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
	.moh__day { min-height: 68px; padding: .35rem .25rem; }
	.moh__num { font-size: .9rem; }
	.moh__hours { font-size: .64rem; }
	.moh__title { font-size: 1.05rem; }
	.moh__event { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
	.moh__btn { transition: none; }
}