/* Alpine passes hub: "Wann sind die Alpenpässe offen?" The table scrolls inside its wrapper on
   phones; the wrapper is position:relative so the screen-reader spans cannot widen the page. */

.ap-mxwrap { position: relative; margin-top: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ap-mxwrap:focus-visible { outline: 2px solid var(--ap-or); outline-offset: 3px; }
.ap-mx { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 3px; font-size: 13px; }
.ap-mx thead th {
    padding: 0 0 6px; text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ap-muted);
}
.ap-mx thead th:first-child { text-align: left; }
.ap-mx thead th.is-now { color: var(--ap-or-text); }
.ap-mx thead abbr { text-decoration: none; }
.ap-mx tbody th {
    position: sticky; left: 0; z-index: 1;
    padding: 6px 12px 6px 0; text-align: left; white-space: nowrap;
    font-size: 14px; font-weight: 700; background: #F5EDDE;
}
.ap-mx tbody th a:hover { text-decoration: underline; text-decoration-color: var(--ap-or); text-underline-offset: 3px; }
.ap-mx tbody th small { display: block; font-size: 12px; font-weight: 400; color: var(--ap-muted); font-variant-numeric: tabular-nums; }
.ap-mx__c { position: relative; height: 34px; min-width: 30px; border-radius: 2px; }
.ap-mx__c--open { background: var(--ap-open); }
.ap-mx__c--weather { background: var(--ap-weather); }
.ap-mx__c--closed { background: var(--ap-closed); }
.ap-mx__c.is-now { box-shadow: inset 0 0 0 2px var(--ap-or); }
.ap-mx-note { margin: 14px 0 0; max-width: 80ch; font-size: 13px; line-height: 1.6; color: var(--ap-muted); }

@media (min-width: 900px) {
    .ap-mx { min-width: 0; }
    .ap-mx tbody th { position: static; }
}