/* =========================
   Weather cards – clean CSS
   ========================= */

/* Größen + Höhe */
:root {
    --wc-title: clamp(2rem, 1.2vw + 1.4rem, 3.2rem);
    --wc-temp: clamp(3.6rem, 4.2vw + .6rem, 8.8rem);
    --wc-mm: clamp(1.15rem, 0.8vw + .85rem, 1.6rem);
    --wc-card-min-h: clamp(210px, 22vw, 300px);
    /* etwas niedriger als vorher */
}

/* Karte */
.weather-card {
    position: relative;
    overflow: hidden;
    border-radius: .9rem;
}

.weather-card .card-body {
    position: relative;
    z-index: 1;
    background: transparent !important;
    min-height: var(--wc-card-min-h);
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .25rem;
}

/* Chart-Layer (Hintergrund) */
.weather-card .wc-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.weather-card .wc-bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.weather-card.wc-inside .wc-bg {
    opacity: .20;
}

/* innen zarter */
.weather-card.wc-outside .wc-bg {
    opacity: .26;
}

/* außen kräftiger */

/* Typo */
.wc-title {
    font-weight: 300;
    font-size: var(--wc-title);
    letter-spacing: .02em;
    margin: .2rem 0 0;
    text-align: center;
}

.wc-temp {
    font-weight: 400;
    font-size: var(--wc-temp);
    line-height: .65;
    font-variant-numeric: tabular-nums;
    text-align: center;
    margin: 0;
}

.wc-temp .unit {
    display: inline-block;
    font-weight: 600;
    font-size: .44em;
    margin-left: .18em;
    transform: translateY(-.12em);
}

/* Min/Max-Zeile */
.wc-minmax {
    font-size: var(--wc-mm);
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 1.2rem;
    margin-top: .5rem;
}

.wc-minmax .val {
    font-weight: 400;
    opacity: .92;
}

.wc-minmax small {
    opacity: .65;
    font-size: .65em;
}

.wc-sep {
    opacity: .45;
    padding: 0 .35rem;
}

/* Timestamps */
.wc-age,
.wc-updated {
    text-align: center;
    font-size: .75rem;
    font-weight: 300;
    line-height: 1;
    color: #6c757d;
}

.wc-age {
    margin-top: 1.05rem;
}

.wc-updated {
    margin-top: .25rem;
    margin-bottom: 1rem;
}

/* Dark-Mode Feinheiten */
html[data-bs-theme="dark"] .wc-minmax small {
    opacity: .56;
}

html[data-bs-theme="dark"] .weather-card {
    background-color: var(--bs-dark);
}

html[data-bs-theme="dark"] .weather-card .card-body {
    color: var(--bs-light);
}

html[data-bs-theme="dark"] .weather-card.wc-inside .wc-bg,
html[data-bs-theme="dark"] .weather-card.wc-outside .wc-bg {
    opacity: .5;
}

.table thead th {
    border-bottom-width: 1px;
}