/* === Frontend Styles === */

.museum-status {
    --ms-color-open: #16a34a;
    --ms-color-closed: #dc2626;
    --ms-color-neutral: #6b7280;
    --ms-color-text: inherit;

    color: var(--ms-color-text);
    font-family: inherit;
}

/* === Simple View === */

.museum-status--simple {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 600;
}

.museum-status__dot {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: var(--ms-color-neutral);
    flex-shrink: 0;
}

.museum-status--simple.is-open .museum-status__dot {
    background: var(--ms-color-open);
    animation: museum-status-pulse-open 2s ease-out infinite;
}

.museum-status--simple.is-closed .museum-status__dot {
    background: var(--ms-color-closed);
    animation: museum-status-pulse-closed 2s ease-out infinite;
}

/* Pulsierender Status-Indikator */

@keyframes museum-status-pulse-open {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45);
    }
    100% {
        box-shadow: 0 0 0 0.6em rgba(22, 163, 74, 0);
    }
}

@keyframes museum-status-pulse-closed {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45);
    }
    100% {
        box-shadow: 0 0 0 0.6em rgba(220, 38, 38, 0);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    .museum-status--simple .museum-status__dot,
    .museum-status--today .museum-status__dot {
        animation: none;
    }
}

/* === Today View === */

.museum-status--today {
    display: block;
    margin: 0;
    padding: 0;
}

.museum-status--today .museum-status__eyebrow,
.museum-status--today .museum-status__headline,
.museum-status--today .museum-status__last-entry,
.museum-status--today .museum-status__noscript-hint {
    display: block;
}

.museum-status--today .museum-status__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 5px 0;
}

/* Status-Punkt im Eyebrow */
.museum-status--today.is-open .museum-status__dot {
    background: var(--ms-color-open);
    animation: museum-status-pulse-open 2s ease-out infinite;
}

.museum-status--today.is-closed .museum-status__dot {
    background: var(--ms-color-closed);
    animation: museum-status-pulse-closed 2s ease-out infinite;
}

.museum-status--today .museum-status__headline {
    font-size: 20px;
    margin: 0;
}

.museum-status--today .museum-status__last-entry {
    font-size: 18px;
    font-weight: 400;
    margin: 5px 0 0 0;
}

.museum-status--today .museum-status__noscript-hint {
    font-size: 14px;
    color: var(--ms-color-neutral);
    margin: 5px 0 0 0;
}

/* === Overview View === */

.museum-status--overview {
    text-align: center;
}

/* Spezifität über den Container */
.museum-status--overview .museum-status__heading {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 0.5em 0;
}

.museum-status--overview .museum-status__heading strong {
    font-size: inherit;
}

.museum-status--overview .museum-status__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.museum-status--overview .museum-status__row {
    margin: 0 0 0.75em 0;
}

.museum-status--overview .museum-status__row:last-child {
    margin-bottom: 0;
}

/* Tag oder Datum */
.museum-status--overview .museum-status__day {
    display: block;
    font-size: 1rem;
    font-weight: 700;
}

/* Öffnungszeit */
.museum-status--overview .museum-status__time {
    display: block;
    font-size: 1rem;
}

/* Anmerkung hinter der Zeit */
.museum-status--overview .museum-status__row-note {
    font-size: 0.75rem;
    opacity: 0.75;
    margin-left: 0.4em;
}

/* Zusatzzeile (Attribut info) */
.museum-status--overview .museum-status__info {
    margin: 0.75em 0 0 0;
}

.museum-status--overview .museum-status__info-label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
}

.museum-status--overview .museum-status__info-value {
    display: block;
    font-size: 1rem;
}

.museum-status--overview .museum-status__more {
    margin-top: 1em;
    margin-bottom: 0;
}

.museum-status--overview .museum-status__more-hint {
    display: block;
    font-size: 0.75rem;
    opacity: 0.75;
    margin-bottom: 0.2em;
}

.museum-status--overview .museum-status__more a {
    text-decoration: underline;
}