/*
 * Öffnungszeiten – zurückhaltend, damit sich der Block ins Theme fügt:
 * Fließtext in Theme-Schrift und -Farbe, nur Titel und "heute" in der
 * Akzentfarbe (Standard wie die Speisekarten: #8A7355).
 */

.oez,
.oez * {
	box-sizing: border-box;
}

.oez {
	--oez-accent: #8A7355;
	--oez-ink: inherit;
	--oez-title-font: "Dancing Script", cursive;
	--oez-open: #43a047;
	--oez-closed: #d9643f;
	--oez-rule: rgba( 128, 120, 110, .4 );
	--oez-tint: rgba( 128, 120, 110, .14 );
	width: 100%;
	max-width: 32rem;
	margin: clamp( 1.5rem, 5vw, 3rem ) auto;
	color: var( --oez-ink );
	text-align: center;
	line-height: 1.5;
	/* Schmale Darstellung richtet sich nach der Breite des Blocks, nicht
	   des Fensters - so passt es auch in eine schmale Theme-Spalte. */
	container-type: inline-size;
}

.oez--left {
	margin-left: 0;
	text-align: left;
}

.oez [hidden] {
	display: none !important;
}

/* --- Titel --- */

.oez-title {
	margin: 0 0 .4em;
	font-family: var( --oez-title-font );
	font-size: clamp( 2.2rem, 7vw, 3.2rem );
	font-weight: 700;
	line-height: 1.1;
	color: var( --oez-accent );
}

/* --- Status --- */

.oez-status {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	margin: 0 0 1.4rem;
	padding: .45em 1.1em;
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	background: var( --oez-tint );
	color: inherit;
}

.oez-dot {
	flex: none;
	width: .6em;
	height: .6em;
	border-radius: 50%;
	background: var( --oez-open );
	box-shadow: 0 0 0 .2em rgba( 67, 160, 71, .25 );
}

.oez-status.is-closed .oez-dot {
	background: var( --oez-closed );
	box-shadow: 0 0 0 .2em rgba( 217, 100, 63, .25 );
}

/* --- Wochenplan --- */

.oez-week,
.oez-exceptions ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.oez-row,
.oez-exceptions li {
	display: grid;
	grid-template-columns: minmax( 0, auto ) minmax( 0, 1fr );
	column-gap: 1.25rem;
	align-items: baseline;
	margin: 0;
	padding: .6rem .85rem;
	border-bottom: 1px dotted var( --oez-rule );
	font-size: 1.05rem;
}

.oez-row:last-child,
.oez-exceptions li:last-child {
	border-bottom: 0;
}

.oez-day {
	font-weight: 600;
	white-space: nowrap;
}

.oez-times {
	text-align: right;
}

.oez-range {
	white-space: nowrap;
}

.oez-sub {
	grid-column: 2;
	text-align: right;
	font-size: .85em;
	opacity: .75;
}

.oez-closed {
	opacity: .65;
}

.oez-row.is-today {
	border-radius: .5rem;
	border-bottom-color: transparent;
	background: rgba( 138, 115, 85, .1 );
	color: var( --oez-accent );
}

.oez-row.is-today .oez-day::after {
	content: " · heute";
	font-weight: 400;
	font-size: .85em;
}

.oez-row.is-exception .oez-sub {
	opacity: 1;
	color: var( --oez-accent );
	font-weight: 600;
}

/* --- Abweichungen, Urlaub, Hinweis --- */

.oez-exceptions,
.oez-vacation {
	margin-top: 1.6rem;
}

.oez-exc-title {
	margin: 0 0 .3rem;
	font-weight: 700;
	color: var( --oez-accent );
}

.oez-exc-label {
	display: block;
	font-weight: 400;
	font-size: .85em;
	opacity: .75;
	white-space: normal;
}

.oez-vacation {
	padding: 1rem 1.2rem;
	border-radius: .6rem;
	background: var( --oez-tint );
}

.oez-vacation p {
	margin: 0;
}

.oez-vacation strong {
	display: inline-block;
	white-space: nowrap;
}

.oez-vacation p + p {
	margin-top: .3rem;
}

.oez-vac-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var( --oez-accent );
}

.oez-notice {
	margin: 1.4rem 0 0;
	font-size: .95rem;
	opacity: .85;
}

/* --- Darstellung "klassisch": zentrierte Zeilen wie bisher ---
 * Farben und Schrift kommen ganz vom Theme bzw. vom Abschnitt, in dem
 * der Block steht (z. B. weiße Schrift auf braunem Hintergrund).
 */

.oez--klassisch {
	max-width: 40rem;
}

.oez-heading {
	margin: 1.8rem 0 .7rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.3;
}

.oez--klassisch > .oez-heading:first-child {
	margin-top: 0;
}

.oez--klassisch .oez-status {
	margin: 0 0 1rem;
	font-size: 1rem;
}

.oez-lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oez-lines li {
	margin: .3rem 0;
	padding: 0;
	font-size: 1.2rem;
	line-height: 1.45;
}

.oez-lines .oez-strong {
	margin-top: 1rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.oez-lines .oez-strong + .oez-strong {
	margin-top: .6rem;
}

.oez-line-note {
	font-size: .85em;
	opacity: .8;
}

.oez--klassisch .oez-exceptions,
.oez--klassisch .oez-vacation {
	max-width: 26rem;
	margin-left: auto;
	margin-right: auto;
}

.oez-season-times {
	font-weight: 400;
}

/* Abweichungen klassisch: eine zentrierte Zeile je Tag. */
.oez--klassisch .oez-exceptions li {
	display: block;
	padding: .15rem 0;
	border: 0;
	text-align: center;
}

.oez--klassisch .oez-exceptions .oez-day,
.oez--klassisch .oez-exc-label {
	display: inline;
	font-weight: 400;
	font-size: 1em;
	opacity: 1;
	white-space: normal;
}

.oez--klassisch .oez-exceptions .oez-day {
	font-weight: 700;
}

.oez--klassisch .oez-exceptions .oez-times {
	display: inline;
	text-align: center;
}

.oez--klassisch .oez-exceptions .oez-times::before {
	content: " – ";
}

.oez--klassisch .oez-exceptions .oez-range {
	display: inline !important;
}

.oez--klassisch .oez-exceptions .oez-sep {
	display: inline !important;
}

.oez--klassisch .oez-exc-title,
.oez--klassisch .oez-vac-title {
	color: inherit;
}

.oez--klassisch .oez-notice {
	font-size: 1.05rem;
	opacity: 1;
}

/* --- Feste Textfarbe ---
 * Manche Themes (z. B. Colibri) faerben Listen, Absaetze und Spans mit
 * eigenen, sehr spezifischen Regeln - "erben" kommt dann nicht durch.
 * Mit gesetzter Textfarbe gilt sie deshalb verbindlich fuer den Block.
 */

.oez.oez--ink,
.oez.oez--ink * {
	color: var( --oez-ink ) !important;
}

.oez.oez--ink.oez--tabelle .oez-title,
.oez.oez--ink.oez--tabelle .oez-row.is-today,
.oez.oez--ink.oez--tabelle .oez-row.is-today *,
.oez.oez--ink.oez--tabelle .is-exception .oez-sub,
.oez.oez--ink.oez--tabelle .oez-exc-title,
.oez.oez--ink.oez--tabelle .oez-vac-title {
	color: var( --oez-accent ) !important;
}

/* --- Inline-Varianten --- */

.oez-inline .oez-status {
	margin: 0;
	font-size: inherit;
}

.oez-empty {
	padding: .8rem 1rem;
	border: 1px dashed #dba617;
	background: #fcf9e8;
	font-size: .9rem;
}

/* --- Schmal (Handy oder schmale Spalte) ---
 * Mehrere Zeitfenster stehen dann untereinander statt mal in einer,
 * mal in zwei Zeilen - so sieht jeder Tag gleich aus.
 */

@container ( max-width: 440px ) {
	.oez-row,
	.oez-exceptions li {
		padding: .55rem .5rem;
		column-gap: .75rem;
		font-size: 1rem;
	}

	.oez-week .oez-range,
	.oez-exceptions .oez-range {
		display: block;
	}

	.oez-week .oez-sep,
	.oez-exceptions .oez-sep {
		display: none;
	}

	.oez-status {
		font-size: .95rem;
	}

	.oez-lines li {
		font-size: 1.05rem;
	}
}

@media ( max-width: 420px ) {
	.oez-week .oez-range,
	.oez-exceptions .oez-range {
		display: block;
	}

	.oez-week .oez-sep,
	.oez-exceptions .oez-sep {
		display: none;
	}
}