/**
 * Bräägg Öffnungszeiten – Frontend (hell, passend zu manserkaese.ch)
 *
 * MARKENFARBE: zentral über --braegg-brand steuerbar. Auf den exakten
 * Logo-Wert der Käserei Bräägg setzen – alles andere passt sich an.
 *
 * Schriften: aus Datenschutzgründen KEIN Google-Fonts-Hotlink. Nutzt die
 * Theme-Schrift bzw. saubere System-Fallbacks. Für die exakte Vorschau-Optik
 * «Poppins»/«Inter» lokal hosten und vor dieser Datei einbinden.
 */

.braegg-oez {
	/* >>> Markenfarbe hier anpassen <<< */
	--braegg-brand:      #9c2b27;            /* Akzent (Logo-Farbe eintragen) */
	--braegg-brand-soft: rgba(156, 43, 39, 0.08);

	--braegg-ink:    #2b2722;                /* Text */
	--braegg-muted:  #6c665c;                /* Sekundärtext */
	--braegg-card:   #ffffff;                /* Kartenfläche */
	--braegg-cream:  #f7f2e8;                /* warme Sektion */
	--braegg-cream2: #f1eadc;
	--braegg-line:   #ece5d6;                /* Trennlinien */

	--braegg-open:        #2f7d50;           /* offen */
	--braegg-open-soft:   #e7f1ea;
	--braegg-closed:      #7a7268;           /* geschlossen (warmes Grau, kein Rot-Clash) */
	--braegg-closed-soft: #f0ece4;
	--braegg-ferien:      #c2872c;           /* Ferien */
	--braegg-ferien-soft: #f7eedd;

	--braegg-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--braegg-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	box-sizing: border-box;
	color: var(--braegg-ink);
	font-family: var(--braegg-body);
	-webkit-font-smoothing: antialiased;
}
.braegg-oez *, .braegg-oez *::before, .braegg-oez *::after { box-sizing: border-box; }

/* ---------- Karte ---------- */
.braegg-oez-card {
	max-width: 30rem;
	border-radius: 16px;
	overflow: hidden;
	background: var(--braegg-card);
	border: 1px solid var(--braegg-line);
	box-shadow: 0 14px 36px -26px rgba(43, 39, 34, 0.5);
}
/* schmaler Markenstreifen oben */
.braegg-oez-card::before {
	content: "";
	display: block;
	height: 3px;
	background: var(--braegg-brand);
}

/* ---------- Hero (hell) ---------- */
.braegg-oez-hero {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.4rem 1.5rem;
	background: var(--braegg-cream);
	border-bottom: 1px solid var(--braegg-line);
}
.braegg-oez-hero__eyebrow {
	margin: 0 0 0.2rem;
	font-family: var(--braegg-body);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--braegg-brand);
}
.braegg-oez-hero__headline {
	margin: 0;
	font-family: var(--braegg-sans);
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.braegg-oez-hero__message { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--braegg-muted); }

/* Headline-Farbe nach Status */
.braegg-oez-state-open   .braegg-oez-hero__headline { color: var(--braegg-open); }
.braegg-oez-state-closed .braegg-oez-hero__headline { color: var(--braegg-ink); }
.braegg-oez-state-ferien .braegg-oez-hero__headline { color: var(--braegg-ferien); }

/* ---------- Status-Münze (dezent, als Badge) ---------- */
.braegg-oez-seal {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 60px;
	height: 60px;
}
.braegg-oez-seal__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--braegg-card);
	border: 2px solid var(--braegg-line);
	box-shadow: 0 4px 10px -6px rgba(43, 39, 34, 0.4);
}
.braegg-oez-seal__ring::before {
	/* feiner gestrichelter Innenring – leiser Hinweis auf die Käsemarke */
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	border: 1px dashed rgba(43, 39, 34, 0.18);
}
.braegg-oez-seal__label {
	position: relative;
	font-family: var(--braegg-sans);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	color: var(--braegg-muted);
}
.braegg-oez-seal__dot {
	position: absolute;
	top: 9px;
	left: 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--braegg-closed);
}
.braegg-oez-seal--open .braegg-oez-seal__ring   { border-color: var(--braegg-open); }
.braegg-oez-seal--open .braegg-oez-seal__label  { color: var(--braegg-open); }
.braegg-oez-seal--open .braegg-oez-seal__dot {
	background: var(--braegg-open);
	box-shadow: 0 0 0 0 rgba(47, 125, 80, 0.5);
	animation: braegg-pulse 2.4s ease-out infinite;
}
.braegg-oez-seal--closed .braegg-oez-seal__ring  { border-color: var(--braegg-line); }
.braegg-oez-seal--closed .braegg-oez-seal__dot   { background: var(--braegg-closed); }
.braegg-oez-seal--ferien .braegg-oez-seal__ring  { border-color: var(--braegg-ferien); }
.braegg-oez-seal--ferien .braegg-oez-seal__label { color: var(--braegg-ferien); }
.braegg-oez-seal--ferien .braegg-oez-seal__dot   { background: var(--braegg-ferien); }

@keyframes braegg-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(47, 125, 80, 0.45); }
	70%  { box-shadow: 0 0 0 9px rgba(47, 125, 80, 0); }
	100% { box-shadow: 0 0 0 0 rgba(47, 125, 80, 0); }
}

/* ---------- Body / Wochenübersicht ---------- */
.braegg-oez-body { padding: 1.2rem 1.5rem 1.4rem; background: var(--braegg-card); }
.braegg-oez-title {
	margin: 0 0 0.7rem;
	font-family: var(--braegg-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--braegg-muted);
}
.braegg-oez-week { list-style: none; margin: 0; padding: 0; }
.braegg-oez-week__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--braegg-line);
}
.braegg-oez-week__row:last-child { border-bottom: 0; }
.braegg-oez-week__day { font-weight: 500; color: var(--braegg-ink); }
.braegg-oez-week__time {
	font-family: var(--braegg-body);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	color: var(--braegg-ink);
	text-align: right;
}
.braegg-oez-week__row.is-closed .braegg-oez-week__time { color: var(--braegg-muted); }
.braegg-oez-week__row.is-today {
	margin: 0 -0.6rem;
	padding: 0.55rem 0.6rem;
	border-radius: 9px;
	border-bottom-color: transparent;
	background: var(--braegg-brand-soft);
	box-shadow: inset 3px 0 0 var(--braegg-brand);
}
.braegg-oez-week__row.is-today .braegg-oez-week__day { color: var(--braegg-brand); font-weight: 600; }

/* ---------- Hinweise ---------- */
.braegg-oez-notes { margin-top: 0.9rem; display: grid; gap: 0.45rem; }
.braegg-oez-note {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0.55rem 0.7rem;
	border-radius: 9px;
	font-size: 0.84rem;
	line-height: 1.35;
	color: var(--braegg-ink);
	background: var(--braegg-cream);
}
.braegg-oez-note__icon { flex: 0 0 auto; color: var(--braegg-brand); }
.braegg-oez-note--ferien { background: var(--braegg-ferien-soft); }
.braegg-oez-note--ferien .braegg-oez-note__icon { color: var(--braegg-ferien); }
.braegg-oez-note--special { background: var(--braegg-open-soft); }
.braegg-oez-note--special .braegg-oez-note__icon { color: var(--braegg-open); }

/* ---------- Kompakter Status / Widget ---------- */
.braegg-oez-status,
.braegg-oez-widget {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 22rem;
	padding: 0.7rem 0.85rem;
	border-radius: 13px;
	background: var(--braegg-card);
	border: 1px solid var(--braegg-line);
	box-shadow: 0 10px 24px -20px rgba(43, 39, 34, 0.5);
}
.braegg-oez-seal--compact { width: 48px; height: 48px; }
.braegg-oez-seal--compact .braegg-oez-seal__label { font-size: 0.55rem; }
.braegg-oez-seal--compact .braegg-oez-seal__dot { top: 6px; width: 7px; height: 7px; }
.braegg-oez-seal--compact .braegg-oez-seal__ring::before { inset: 5px; }
.braegg-oez-status__text { display: flex; flex-direction: column; line-height: 1.25; }
.braegg-oez-status__text strong { font-family: var(--braegg-sans); font-size: 0.98rem; font-weight: 600; }
.braegg-oez-status__text span { font-size: 0.82rem; color: var(--braegg-muted); }

.braegg-oez-state-open   .braegg-oez-status__text strong { color: var(--braegg-open); }
.braegg-oez-state-closed .braegg-oez-status__text strong { color: var(--braegg-ink); }
.braegg-oez-state-ferien .braegg-oez-status__text strong { color: var(--braegg-ferien); }

.braegg-oez-week--widget { margin-top: 0.6rem; max-width: 22rem; font-size: 0.9rem; }
.braegg-oez-week--widget .braegg-oez-week__row { padding: 0.35rem 0; }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
	.braegg-oez-hero { padding: 1.2rem; }
	.braegg-oez-hero__headline { font-size: 1.25rem; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.braegg-oez-seal--open .braegg-oez-seal__dot { animation: none; }
}