/* ═══════════════════════════════════════════════════════════════════════
   Meierei Öffnungszeiten – Frontend Widget
   Farbpalette: #003B8D (Blau) · Weiß · Schwarz
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ───────────────────────────────────────────── */
.moz-widget {
    --moz-blau:       #003B8D;
    --moz-blau-dk:    #002d6e;
    --moz-blau-lt:    #e8eef9;
    --moz-blau-dim:   rgba(0,59,141,.12);

    --moz-bg:         #ffffff;
    --moz-bg-row:     rgba(0,59,141,.045);
    --moz-bg-header:  #003B8D;
    --moz-border:     #003B8D;
    --moz-line:       #e0e6ef;

    --moz-txt:        #0a0a0a;
    --moz-txt-sec:    #333333;
    --moz-txt-dim:    #666666;
    --moz-txt-muted:  #888888;
    --moz-ruhetag:    #aaaaaa;
}

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.moz-widget {
    background: var(--moz-bg);
    border: 1.5px solid var(--moz-line);
    border-radius: 6px;
    overflow: hidden;
    color: var(--moz-txt);
    font-family: inherit;
    box-sizing: border-box;
    box-shadow: 0 4px 24px rgba(0,59,141,.10), 0 1px 4px rgba(0,0,0,.06);
}

/* ── Header-Balken ───────────────────────────────────────────────────── */
.moz-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--moz-bg-header);
    padding: 18px 26px;
}
.moz-clock-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #ffffff;
    opacity: .9;
}
.moz-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* ── Body-Bereich ────────────────────────────────────────────────────── */
.moz-status-bar {
    padding: 14px 26px 0;
}
.moz-table-wrap {
    padding: 8px 26px 20px;
}

/* ── Status-Badge (Jetzt geöffnet / geschlossen) ─────────────────────── */
.moz-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.moz-badge--offen {
    background: #edfbf0;
    border: 1.5px solid #4caf6e;
    color: #1a6e35;
}
.moz-badge--geschlossen {
    background: #fff0f0;
    border: 1.5px solid #e57373;
    color: #b71c1c;
}

/* Pulsierender Punkt */
.moz-pulse {
    width: 7px;
    height: 7px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    animation: moz-pulse-anim 2s ease-in-out infinite;
}
.moz-dot {
    width: 7px;
    height: 7px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    opacity: .6;
}
@keyframes moz-pulse-anim {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%       { opacity: .3;  transform: scale(1.35); }
}

/* ── Tabelle ─────────────────────────────────────────────────────────── */
.moz-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.moz-table tbody tr + tr td {
    border-top: 1px solid var(--moz-line);
}

/* Zeile */
.moz-row td {
    padding: 10px 6px;
    font-size: .92rem;
    line-height: 1.4;
    vertical-align: middle;
}
.moz-row:hover td {
    background: var(--moz-bg-row);
}

/* Tag-Spalte */
.moz-tag {
    font-weight: 700;
    color: var(--moz-txt);
    min-width: 130px;
    padding-right: 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Heute-Marker */
.moz-heute-marker {
    width: 7px;
    height: 7px;
    background: var(--moz-blau);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(0,59,141,.2);
    animation: moz-pulse-anim 2.5s ease-in-out infinite;
}

/* Heute-Zeile */
.moz-row--heute td {
    background: var(--moz-bg-row);
}
.moz-row--heute .moz-tag {
    color: var(--moz-blau);
    font-weight: 800;
}
.moz-row--heute .moz-zeit {
    color: var(--moz-blau-dk);
    font-weight: 700;
}

/* Zeit-Spalte */
.moz-zeit {
    color: var(--moz-txt-sec);
    white-space: nowrap;
    min-width: 130px;
    padding-right: 14px !important;
    font-weight: 500;
}

/* Ruhetag */
.moz-ruhetag-label {
    color: var(--moz-ruhetag);
    font-style: italic;
    font-weight: 400;
    font-size: .88em;
}

/* Ruhetag-Zeile */
.moz-row--ruhetag .moz-tag {
    color: var(--moz-txt-muted);
    font-weight: 500;
}
.moz-row--ruhetag td {
    opacity: .7;
}

/* Zusatz-Spalte */
.moz-zusatz {
    font-size: .82rem;
    color: var(--moz-txt-dim);
}
.moz-zusatz-text {
    font-style: italic;
    background: var(--moz-blau-lt);
    color: var(--moz-blau-dk);
    padding: 2px 9px;
    border-radius: 4px;
    border-left: 2.5px solid var(--moz-blau);
    display: inline-block;
    line-height: 1.6;
    font-size: .88em;
}

/* Hinweis-Zeile */
.moz-row--hinweis td {
    padding-top: 12px;
    padding-bottom: 8px;
}
.moz-hinweis-cell {
    color: var(--moz-txt-dim) !important;
    font-size: .82rem;
    font-style: italic;
    border-top: 1px dashed var(--moz-line) !important;
    padding-top: 12px !important;
}
.moz-row--hinweis + .moz-row--hinweis .moz-hinweis-cell {
    border-top: none !important;
    padding-top: 4px !important;
}

/* Leer-State */
.moz-empty {
    color: var(--moz-txt-muted);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
    font-size: .88rem;
}

/* ── Fußnote ─────────────────────────────────────────────────────────── */
.moz-footer-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 26px;
    padding: 12px 0 20px;
    border-top: 1px solid var(--moz-line);
    font-size: .8rem;
    color: var(--moz-txt-dim);
    font-style: italic;
    line-height: 1.5;
}
.moz-info-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--moz-blau);
    opacity: .7;
    margin-top: 1px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .moz-header         { padding: 15px 18px; }
    .moz-title          { font-size: .92rem; letter-spacing: .08em; }
    .moz-status-bar     { padding: 12px 18px 0; }
    .moz-table-wrap     { padding: 6px 18px 16px; }
    .moz-footer-note    { margin: 0 18px; }
    .moz-row td         { font-size: .84rem; padding: 9px 4px; }
    .moz-tag            { min-width: 90px; padding-right: 10px !important; }
    .moz-zeit           { min-width: auto; padding-right: 8px !important; }
    .moz-zusatz         { display: none; }
}