/*
 * WM_COUNTDOWN_MOBILE_V1
 *
 * Smartphone- und Tablet-Anpassung für:
 * - Countdown
 * - Übersichtsseiten
 * - Tabellen
 * - Statistik-Charts
 * - persönliche Tipps
 */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

button,
select,
input,
textarea,
summary,
a {
    touch-action: manipulation;
}

button,
select,
input,
textarea {
    font-size: 16px;
}

.wrap {
    width: 100%;
    max-width: 1200px;
    min-width: 0;
    margin-inline: auto;
}

.hero,
.overview,
.panel,
.grid,
.card,
details,
.tips,
.tip {
    min-width: 0;
    max-width: 100%;
}

.hero h1,
.hero .sub,
.panel h2,
.panel h3,
details summary,
.card,
.tip {
    overflow-wrap: anywhere;
    word-break: normal;
}

.overview select,
#wm-overview-select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 10px 42px 10px 12px;
    font-size: 16px;
    line-height: 1.25;
    border-radius: 10px;
}

.panel {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.panel > table {
    width: max-content;
    min-width: 100%;
    max-width: none;
}

table {
    border-collapse: collapse;
}

th,
td {
    padding: 9px 10px;
    vertical-align: top;
}

details {
    width: 100%;
}

details > summary {
    min-height: 44px;
    padding-block: 10px;
    cursor: pointer;
}

.tips {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 170px),
                1fr
            )
        );
}

.wm-cs-wrap-v1,
.wm-cs-box-v1,
.wm-cs-grid-v1,
.wm-cs-cards-v1,
.wm-cs-chart-scroll-v1,
.wm-cs-table-scroll-v1,
.wm-cs-bars-v1,
.wm-cs-legend-v1 {
    min-width: 0;
    max-width: 100%;
}

.wm-cs-chart-scroll-v1,
.wm-cs-table-scroll-v1 {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.wm-cs-chart-svg-v1 {
    display: block;
    width: max(920px, 100%) !important;
    min-width: 920px !important;
    max-width: none !important;
    height: auto;
}

.wm-cs-table-v1 {
    width: max-content;
    min-width: 920px;
    max-width: none;
}

.wm-cs-track-v1 {
    min-width: 0;
}

.wm-cs-bar-name-v1,
.wm-cs-legend-row-v1,
.wm-cs-list-row-v1 {
    min-width: 0;
}

.wm-cs-legend-row-v1 span:last-child {
    overflow-wrap: anywhere;
}

.wm-cs-status-v1 {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .wrap {
        padding: 20px 14px 60px;
    }

    .hero {
        min-height: auto;
        padding: 24px 16px;
        box-shadow: 7px 7px 0 #2b2b2b;
    }

    .countdown {
        gap: 8px;
    }

    .grid,
    .wm-cs-cards-v1 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .wm-cs-grid-v1 {
        grid-template-columns: 1fr;
    }

    .wm-cs-legend-v1 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .wm-cs-box-v1 {
        padding: 12px;
    }

    .wm-cs-table-v1 {
        font-size: .86rem;
    }
}

@media (max-width: 640px) {
    .wrap {
        padding:
            max(12px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            calc(48px + env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .hero {
        padding: 18px 11px;
        border-width: 2px;
        box-shadow: 4px 4px 0 #2b2b2b;
    }

    .hero h1 {
        margin: 12px 0 7px;
        font-size: clamp(1.85rem, 13vw, 3.8rem);
        line-height: 1;
    }

    .hero .sub {
        margin-bottom: 15px;
        font-size: clamp(.9rem, 4vw, 1.1rem);
    }

    .kicker {
        font-size: .82rem;
        letter-spacing: .07em;
    }

    .countdown {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 14px;
    }

    .countdown > * {
        min-width: 0;
        padding: 10px 5px;
    }

    .seconds-only {
        margin-top: 17px;
    }

    .overview {
        margin-top: 22px;
    }

    .overview label {
        display: block;
        margin-bottom: 7px;
        font-size: .9rem;
    }

    .panel {
        padding-inline: 0;
    }

    .grid,
    .wm-cs-cards-v1 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .card,
    .wm-cs-card-v1 {
        padding: 10px 8px;
    }

    .card small,
    .wm-cs-card-v1 small {
        font-size: .72rem;
    }

    .card b,
    .wm-cs-card-v1 strong {
        font-size: 1.25rem;
    }

    th,
    td {
        padding: 7px 8px;
        font-size: .79rem;
    }

    details > summary {
        font-size: .9rem;
    }

    .tip {
        padding: 10px;
        font-size: .84rem;
    }

    .wm-cs-title-v1 {
        font-size: 1.45rem;
    }

    .wm-cs-sub-v1,
    .wm-cs-note-v1 {
        font-size: .82rem;
    }

    .wm-cs-grid-v1 {
        gap: 9px;
    }

    .wm-cs-box-v1 {
        padding: 10px;
        border-radius: 9px;
    }

    .wm-cs-list-row-v1 {
        font-size: .86rem;
    }

    .wm-cs-legend-v1 {
        grid-template-columns: 1fr;
        font-size: .82rem;
    }

    .wm-cs-bar-row-v1 {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        gap: 5px 8px;
        padding-block: 3px;
    }

    .wm-cs-bar-name-v1 {
        grid-column: 1;
        grid-row: 1;
        font-size: .84rem;
    }

    .wm-cs-bar-row-v1 > strong {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        font-size: .84rem;
    }

    .wm-cs-track-v1 {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        height: 16px;
    }

    .wm-cs-table-v1 {
        min-width: 850px;
        font-size: .76rem;
    }

    .wm-cs-table-v1 th,
    .wm-cs-table-v1 td {
        padding: 7px 6px;
    }

    .wm-cs-status-v1 {
        padding: 3px 6px;
        font-size: .7rem;
    }
}

@media (max-width: 400px) {
    .wrap {
        padding-inline: 8px;
    }

    .hero {
        padding-inline: 8px;
    }

    .grid,
    .wm-cs-cards-v1 {
        grid-template-columns: 1fr;
    }

    .countdown {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .wm-cs-card-v1 strong {
        font-size: 1.18rem;
    }

    .wm-cs-table-v1 {
        font-size: .72rem;
    }
}

@media (
    max-height: 500px
)
and (
    orientation: landscape
) {
    .hero {
        min-height: auto;
        padding-block: 12px;
    }

    .hero h1 {
        font-size: clamp(1.7rem, 8vw, 3rem);
    }

    .countdown {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}