/* MSC Öffnungszeiten und Sperrkalender – mobile first, barrierearm */
.msc-oz {
	--msc-blue: #1514c7;
	--msc-blue-dark: #0d0d85;
	--msc-tint: #eef0ff;
	--msc-line: #d5d9f2;
	--msc-ok: #0b6b34;
	--msc-ok-bg: #e5f6ec;
	--msc-warn: #8a4b00;
	--msc-warn-bg: #fff1d6;
	--msc-bad: #a4161a;
	--msc-bad-bg: #fde6e5;
	display: grid;
	gap: 1.5rem;
	color: #14163a;
}

.msc-oz h2 { margin: 0 0 .4rem; font-family: var(--msc-display, inherit); font-size: 1.15rem; font-weight: 800; color: var(--msc-blue); }
.msc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Statuskarte (Stil D1: weiße Karte, blaue Linie, Punkt in Statusfarbe, Zeitstrahl) ---- */
.msc-status {
	--msc-dot: var(--msc-ok);
	border: 2px solid var(--msc-blue);
	border-radius: 16px;
	background: #fff;
	padding: .85rem 1.1rem .8rem;
	display: grid;
	gap: .55rem;
}
.msc-status--open { --msc-dot: #16b34a; }
.msc-status--closed { --msc-dot: #e5262b; }
.msc-status--blocked { --msc-dot: #e5262b; }
.msc-status p { margin: 0; }
.msc-status__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.msc-status__badge { display: flex; align-items: center; gap: .7rem; font-family: var(--msc-display, inherit); font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 800; line-height: 1.15; color: #14163a; }
.msc-status__icon { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--msc-dot); box-shadow: 0 0 0 5px color-mix(in srgb, var(--msc-dot) 22%, transparent); }
.msc-status__meta { color: #4a4e7a; }
.msc-status__hours { font-size: .95rem; color: #4a4e7a; }
.msc-status__hours strong { color: #14163a; }
.msc-status__closures { list-style: none; margin: 0; padding: 0; font-size: .85rem; color: #14163a; }
.msc-status__regular { font-size: .85rem; color: #4a4e7a; }
.msc-status__error { background: #fff; border: 1px solid var(--msc-bad); border-radius: 8px; padding: .5rem .75rem; color: var(--msc-bad); font-weight: 600; }

/* Zeitstrahl: rot = gesperrt oder geschlossen, blau = geöffnet, dunkle Linie = jetzt */
.msc-tl { margin: .5rem 0 .2rem; }
.msc-tl__track { position: relative; height: 22px; border-radius: 6px; background: #f5b5b2; overflow: visible; }
.msc-tl__seg { position: absolute; top: 0; bottom: 0; background: #e3f6ea; box-shadow: inset 0 0 0 1px #a9dcbd; }
.msc-tl__seg:first-of-type { border-radius: 6px 0 0 6px; }
.msc-tl__seg:last-of-type { border-radius: 0 6px 6px 0; }
.msc-tl__seg:only-of-type { border-radius: 6px; }
/* Jetzt außerhalb der Öffnungszeit: Balken ganz rot, keine grünen Abschnitte */
.msc-tl__track--off .msc-tl__seg { display: none; }
/* ... dann auch Uhrzeiten unter dem Balken und die Zeile mit der Öffnungszeit ausblenden (die Kopfzeile nennt die nächste Öffnung) */
.msc-tl:has(.msc-tl__track--off) .msc-tl__labels,
.msc-tl:has(.msc-tl__track--off) + .msc-status__hours { display: none; }
.msc-tl__now { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #14163a; box-shadow: 0 0 0 2px #fff; }
.msc-tl__labels { position: relative; height: 1.35rem; margin-top: .3rem; font-size: .8rem; color: #4a4e7a; font-variant-numeric: tabular-nums; }
.msc-tl__labels span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.msc-tl__labels .is-first { transform: none; }
.msc-tl__labels .is-last { transform: translateX(-100%); }
/* ---- Kalender ---- */
.msc-cal { background: #fff; border: 2px solid var(--msc-blue); border-radius: 16px; padding: .9rem 1.1rem; }
.msc-cal__nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.msc-cal__nav[hidden] { display: none; }
.msc-cal__month { margin: 0; font-family: var(--msc-display, inherit); font-size: 1.2rem; font-weight: 800; color: var(--msc-blue); text-align: center; flex: 1; }
.msc-btn { min-width: 3rem; min-height: 3rem; border: 2px solid var(--msc-blue); border-radius: 10px; background: #fff; color: var(--msc-blue); font-size: 1.25rem; font-weight: 700; cursor: pointer; }
.msc-btn:hover:not(:disabled), .msc-btn:focus-visible { background: var(--msc-blue); color: #fff; }
.msc-btn:disabled { opacity: .35; cursor: default; }
.msc-btn:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

.msc-oz.js .msc-month { display: none; }
.msc-oz.js .msc-month.is-current { display: block; }
.msc-oz.js .msc-grid caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.msc-month + .msc-month { margin-top: 1.5rem; }

.msc-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
.msc-grid caption { caption-side: top; text-align: left; font-weight: 700; font-size: 1.1rem; color: var(--msc-blue); padding-bottom: .4rem; }
.msc-grid th { font-size: .8rem; font-weight: 700; color: var(--msc-blue-dark); padding: .25rem 0; text-align: center; }
.msc-grid abbr { text-decoration: none; }
.msc-grid td { padding: 0; }
.msc-day {
	position: relative; min-height: 4.2rem; border: 1px solid var(--msc-line); border-radius: 8px;
	background: #fff; text-align: left; vertical-align: top; padding: .3rem .3rem .35rem;
}
.msc-day__num { display: block; font-weight: 700; font-size: .88rem; line-height: 1.2; }
.msc-day__t { display: block; font-size: .66rem; font-weight: 600; color: #4a4e7a; line-height: 1.1; margin-top: .25rem; }
.msc-day__flag { display: block; font-size: .72rem; font-weight: 700; line-height: 1.1; margin-top: .35rem; }
.msc-day--closed { background: #f5b5b2; border-color: var(--msc-bad); color: #7a0f12; }
.msc-day.is-today { outline: 3px solid var(--msc-blue); outline-offset: 0; }
.msc-grid__empty { background: transparent; }

/* Zeitbalken: grün = Regelzeit, rot = gesperrt */
.msc-bar { position: relative; display: block; height: 9px; margin-top: .35rem; border-radius: 5px; background: #e3f6ea; border: 1px solid #a9dcbd; overflow: hidden; }
.msc-bar i { position: absolute; top: 0; bottom: 0; background: #f5b5b2; }

/* Umschalter (Kopfzeile) */
.msc-sw { display: flex; gap: .5rem; margin: .2rem 0 .6rem; }
.msc-sw[hidden] { display: none; }
.msc-sw button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; border: 2px solid var(--msc-blue); border-radius: 12px; padding: .4rem .2rem; background: #fff; color: var(--msc-blue); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.msc-sw button svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.msc-sw button[aria-pressed="true"] { background: var(--msc-blue); color: #fff; }
.msc-sw button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

.msc-view__title { font-size: 1.05rem; margin: .6rem 0 .5rem; color: var(--msc-blue); }
.msc-oz.js .msc-view { display: none; }
.msc-oz.js .msc-view.is-current { display: block; }
.msc-view + .msc-view { margin-top: 1.5rem; }
.msc-oz.js .msc-view + .msc-view { margin-top: 0; }

/* 14 Tage */
.msc-dayrow { display: grid; grid-template-columns: 3.6rem 1fr; gap: .8rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--msc-line); }
.msc-view--days .msc-view__title + .msc-dayrow { border-top: 0; }
.msc-dayrow__date { text-align: center; border-radius: 10px; padding: .25rem 0; line-height: 1.1; background: #e3f6ea; border: 1px solid #a9dcbd; }
.msc-dayrow__date span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.msc-dayrow__date b { font-family: var(--msc-display, inherit); font-size: 1.3rem; }
.msc-dayrow--closed .msc-dayrow__date { background: #f5b5b2; border-color: var(--msc-bad); }
.msc-dayrow.is-today .msc-dayrow__date { outline: 3px solid var(--msc-blue); }
.msc-dayrow__txt { font-size: .92rem; min-width: 0; }
.msc-dayrow__txt strong { display: block; }
.msc-dayrow__line { display: block; }
.msc-dayrow--closed .msc-bar { background: #f5b5b2; border-color: var(--msc-bad); }
.msc-dayrow--closed .msc-bar i { display: none; }

/* Jahr */
.msc-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: .9rem; }
.msc-year__m { display: block; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.msc-year__m:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.msc-year__h { display: block; margin-bottom: .25rem; font-size: .85rem; font-weight: 800; color: var(--msc-blue); }
.msc-year__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.msc-year__g i { aspect-ratio: 1; display: block; border-radius: 2px; background: #e3f6ea; border: 1px solid #a9dcbd; }
.msc-year__g i.is-empty { visibility: hidden; }
.msc-year__g i.msc-y--partial { box-shadow: inset 0 -3px 0 #e5262b; }
.msc-year__g i.msc-y--closed { background: #f5b5b2; border-color: var(--msc-bad); }
.msc-year__g i.is-today { outline: 2px solid var(--msc-blue); }
.msc-hint { margin: .6rem 0 0; font-size: .85rem; color: #4a4e7a; }
.msc-oz:not(.js) .msc-nojs-hide { display: none; }

.msc-list__title { font-size: 1rem; margin: 1rem 0 .4rem; color: var(--msc-blue); }
.msc-list { width: 100%; border-collapse: collapse; font-size: .92rem; }
.msc-list th, .msc-list td { padding: .35rem .5rem .35rem 0; border-top: 1px solid var(--msc-line); vertical-align: top; text-align: left; }
.msc-list tr:first-child th, .msc-list tr:first-child td { border-top: 0; }
.msc-list th { font-weight: 700; white-space: nowrap; }
.msc-list__none { margin: 0; opacity: .85; }
.msc-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: .9rem; }
.msc-legend li { display: flex; align-items: center; gap: .4rem; }
.msc-key { display: inline-block; width: 1.1rem; height: 1.1rem; border: 1px solid var(--msc-line); border-radius: 4px; background: #fff; }
.msc-key--open { background: #e3f6ea; border-color: #a9dcbd; }
.msc-key--partial { background: repeating-linear-gradient(135deg, #e3f6ea 0 4px, #f5b5b2 4px 8px); border-color: #a9dcbd; }
.msc-key--closed { background: #f5b5b2; border-color: var(--msc-bad); }
.msc-notice { margin: 1rem 0 0; font-size: .9rem; opacity: .9; }

@media (min-width: 640px) {
	.msc-day { min-height: 4.8rem; padding: .35rem .4rem; }
	.msc-day__num { font-size: 1rem; }
	.msc-day__t { font-size: .75rem; }
	.msc-grid { border-spacing: 5px; }
	.msc-oz.has-sidebyside { grid-template-columns: 1fr 1fr; }
}
/* Hinweise: Anlage bleibt geöffnet, aber mit Einschränkung (blau) */
.msc-bar i.msc-bar__h { top: 2px; bottom: 2px; background: var(--msc-blue); border-radius: 2px; }
.msc-status__hints { list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--msc-blue-dark); }
.msc-status__hints li + li { margin-top: .15rem; }
.msc-dayrow__note { color: var(--msc-blue-dark); }
.msc-day__t--hint { color: var(--msc-blue); font-weight: 700; }
.msc-day__t--hint::before { content: "i"; display: inline-block; width: 1em; height: 1em; margin-right: .2em; border-radius: 50%; background: var(--msc-blue); color: #fff; font-size: .85em; line-height: 1em; text-align: center; vertical-align: -.05em; }
.msc-list--hint th, .msc-list--hint td { color: var(--msc-blue-dark); }
.msc-year__g i.msc-y--hint { background-image: radial-gradient(circle, var(--msc-blue) 0 28%, transparent 32%); }
.msc-key--hint { background: #e3f6ea radial-gradient(circle, var(--msc-blue) 0 28%, transparent 32%); border-color: #a9dcbd; }
/* Handy: Hinweiszeit in der Zelle nur als "i" (Zeiten stehen in der Liste), Listen zweizeilig statt Spalten */
@media (max-width: 639px) {
	.msc-day__t--hint { font-size: 0; margin-top: .2rem; }
	.msc-day__t--hint::before { font-size: .62rem; margin-right: 0; }
	.msc-list, .msc-list tbody { display: block; }
	.msc-list tr { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; padding: .35rem 0; border-top: 1px solid var(--msc-line); }
	.msc-list tr:first-child { border-top: 0; }
	.msc-list th, .msc-list td { border-top: 0 !important; padding: 0; }
	.msc-list td:nth-child(3) { grid-column: 1 / -1; }
}
.msc-list__line { display: block; }

/* Statuskarte als Link zur Seite Öffnungszeiten (ganze Karte klickbar) */
.msc-status { position: relative; }
.msc-status__link { margin-left: auto; font-size: .9rem; font-weight: 700; color: var(--msc-blue); text-decoration: none; white-space: nowrap; }
.msc-status__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.msc-status:has(.msc-status__link) { transition: box-shadow .15s; }
.msc-status:has(.msc-status__link:hover), .msc-status:has(.msc-status__link:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--msc-blue) 25%, transparent); }
.msc-status__link:hover { text-decoration: underline; }
.msc-status__link:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }