/* Extracted from template-parts/timeline-controls.php in 3.8.0. */
/* ===== Controls (nur Styles für die Controls) ===== */
.ssw-map-page {
    --ctl-h: 36px;
    --gap: 10px;
    --fs: 14px;
    --chip-pad-x: 12px;
    --ui-bg: rgba(255, 255, 255, .92);
    --ui-stroke: rgba(0, 0, 0, .06);
    --chip-bg: rgba(0, 0, 0, .06);
    --chip-dark: rgba(17, 17, 17, .9);
}

.timeline-fab {
    position: absolute;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1000;
    display: grid;
    align-items: center;
    gap: var(--gap);
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--ui-bg);
    border: 1px solid var(--ui-stroke);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    font: var(--fs)/1.3 "DM Sans", Arial, sans-serif;
    box-sizing: border-box;
    width: min(980px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    grid-template-columns: auto 1fr auto auto auto auto;
    grid-template-areas: "play slider year count cluster info";
}

@media (max-height:580px) {
    .timeline-fab {
        top: calc(env(safe-area-inset-top, 0px)+64px);
        bottom: auto;
    }
}

/* ===== Mobile: 2 Bereiche (Slider + Row) ===== */
@media (max-width:560px) {
    :root {
        --ctl-h: 32px;
        --gap: 8px;
        --fs: 13px;
        --chip-pad-x: 10px;
    }

    .timeline-fab {
        left: 0;
        right: 0;
        transform: none;
        bottom: env(safe-area-inset-bottom, 0px);
        width: auto;
        border-radius: 0;
        padding-left: calc(12px + env(safe-area-inset-left, 0px));
        padding-right: calc(12px + env(safe-area-inset-right, 0px));
        grid-template-columns: 1fr;
        grid-template-areas:
            "slider"
            "row";
        row-gap: 8px;
        justify-items: stretch;
    }

    .timeline-row {
        grid-area: row;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 8px;
        flex-wrap: nowrap;
        min-width: 0;
    }
}

/* Desktop: Row wird „unsichtbar“, Kinder bleiben Grid-Items */
@media (min-width:561px) {
    .timeline-row {
        display: contents;
    }
}

/* Areas & Basics */
.timeline-play {
    grid-area: play;
}

.timeline-slider {
    grid-area: slider;
    width: 100%;
}

.timeline-year {
    grid-area: year;
}

.timeline-count {
    grid-area: count;
}

.timeline-cluster {
    grid-area: cluster;
}

.timeline-info {
    grid-area: info;
}

.timeline-chip,
.timeline-btn,
label.timeline-chip {
    margin: 0;
}

/* Theme-Reset */
.timeline-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ctl-h);
    padding: 0 var(--chip-pad-x);
    border-radius: 9999px;
    box-sizing: border-box;
    white-space: nowrap;
    min-width: 0;
}

/* Play */
.timeline-btn {
    appearance: none;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #111;
    color: #fff;
    border-radius: 9999px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: .2px;
    display: inline-grid;
    grid-template-columns: 18px 1fr 10px;
    gap: 8px;
    align-items: center;
    width: 120px;
    height: var(--ctl-h);
    padding: 0 12px;
    text-align: left;
}

.timeline-btn.paused {
    background: #fff;
    color: #111;
}

.timeline-btn .icon {
    width: 18px;
    text-align: center;
}

.timeline-btn .label {
    width: 52px;
    text-align: center;
}

.timeline-btn .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
    animation: pulse 1.6s infinite;
}

.timeline-btn.paused .dot {
    background: #999;
    box-shadow: none;
    animation: none;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Kompakter auf Mobile */
@media (max-width:560px) {
    .timeline-btn .label {
        display: none;
    }

    .timeline-btn {
        width: 78px;
    }
}

@media (max-width:380px) {
    .timeline-btn {
        width: 66px;
    }
}

/* Slider */
.timeline-slider-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    padding: 0 12px;
}

@media (max-width:560px) {
    .timeline-slider-inner {
        padding: 0 14px;
        column-gap: 6px;
    }
}

@media (max-width:360px) {
    .timeline-slider-inner {
        padding: 0 16px;
        column-gap: 4px;
    }
}

.timeline-micro {
    font-size: var(--fs);
    color: #444;
    white-space: nowrap;
}

.timeline-range {
    width: 100%;
}

/* Year + Count */
.timeline-year-chip {
    background: var(--chip-bg);
    font-weight: 800;
    min-width: 64px;
}

.timeline-count-badge {
    background: var(--chip-dark);
    color: #fff;
    font-weight: 800;
    min-width: 56px;
}

@media (max-width:360px) {
    .timeline-year-chip {
        min-width: 56px;
    }

    .timeline-count-badge {
        min-width: 48px;
    }
}

/* Cluster: klarer Text + Switch */
/* Cluster: Chip-Checkbox (kompakt & zentriert) */
.chip-checkbox {
    background: var(--chip-bg);
    gap: 10px;
}

.chip-checkbox input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.chip-checkbox .box {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid rgba(0, 0, 0, .28);
    background: #111;
    /* wenn gecheckt wird eh dunkel – optional: #fff im unchecked */
    background: #fff;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .04);
}

/* Zustände */
.chip-checkbox input:checked+.box {
    background: #111;
    border-color: #111;
}

.chip-checkbox input:checked+.box::after {
    opacity: 1;
}

/* Harmonischer SVG-Haken (rund, crisp) */
.chip-checkbox .box::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78% 78%;
    opacity: 0;
    /* nur sichtbar wenn checked */
    /* Weißer Haken mit runden Enden */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9l4 4 8-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.chip-checkbox .txt {
    font-size: var(--fs);
    color: #111;
    line-height: 1;
}

/* kleine Screens etwas enger */
@media (max-width:400px) {
    .chip-checkbox {
        gap: 8px;
    }
}

/* falls dein Theme Labels abwärts paddet: */
label.timeline-chip {
    margin-bottom: 0;
}


/* Info-Chip: auf Mobile icon-only, als runder Icon-Chip */
.timeline-info-btn {
    background: var(--chip-bg);
    border: 1px solid var(--ui-stroke);
    color: #111;
    gap: 8px;
}

.timeline-info-btn .i {
    font-style: normal;
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
}

@media (max-width:560px) {
    .timeline-info-btn {
        width: var(--ctl-h);
        padding: 0;
        justify-content: center;
    }

    .timeline-info-btn .txt {
        display: none;
    }
}

/* Info-Popover */
.timeline-info-panel {
    position: absolute;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(980px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    padding: 14px 16px;
    z-index: 1001;
    box-sizing: border-box;
    font: var(--fs)/1.45 Montserrat, Arial, sans-serif;
}

@media (max-height:580px) {
    .timeline-info-panel {
        top: calc(env(safe-area-inset-top, 0px)+64px);
        bottom: auto;
    }
}

.timeline-info-panel h4 {
    margin: 0 0 6px;
    font-size: 16px;
}

.timeline-info-panel p {
    margin: 0;
    font-size: 14px;
    color: #333;
}

/* 4.3.2: history information overlay, sized to the map viewport (not the full window). */
.ssw-history-map-column,.timeline-root{position:relative;min-width:0}
body.ssw-map-page.page-template-timeline .timeline-info-panel{
 position:absolute;left:50%;right:auto;bottom:clamp(85px,12vh,115px);top:auto;
 transform:translateX(-50%);width:min(540px,calc(100% - 28px));max-width:calc(100% - 28px);
 max-height:min(58dvh,420px);overflow-y:auto;overscroll-behavior:contain;
 background:#142119;color:#eaf4e8;border:1px solid #59725b;border-radius:14px;
 padding:clamp(14px,2vw,22px);box-shadow:0 16px 40px #000a;
 font:400 14px/1.6 'DM Sans',sans-serif;z-index:1100;box-sizing:border-box;
}
body.ssw-map-page.page-template-timeline .timeline-info-panel[hidden]{display:none!important}
body.ssw-map-page.page-template-timeline .timeline-info-panel :is(h1,h2,h3,h4,p,li){color:#eaf4e8;max-width:100%;overflow-wrap:anywhere}
body.ssw-map-page.page-template-timeline .timeline-info-panel a{color:#c9fd6b;overflow-wrap:anywhere}
body.ssw-map-page.page-template-timeline .timeline-info-panel img{max-width:100%;height:auto}
@media(max-width:650px){body.ssw-map-page.page-template-timeline .timeline-info-panel{width:calc(100% - 20px);max-width:calc(100% - 20px);bottom:clamp(98px,16vh,140px);max-height:45dvh;padding:14px;font-size:13px}}