/*
 * METEO SANTA SUSANNA
 * Fitxer: public/assets/css/dashboard.css
 * Versió: 1.5.9a
 *
 * Desenvolupament i proveïdor: SOMOSDIGITAL.NET
 * © 2026 SOMOSDIGITAL.NET
 */

/* METEO SANTA SUSANNA – consolidated dashboard styles v1.5.0m */

/* Consolidated legacy dashboard layer */
:root{--nav:#16354b;--accent:#1687b8;--panel:#fff;--bg:#e8eff3;--text:#173246;--muted:#687c8a;--line:#d5e1e7;--up:#167a45;--down:#b34242;--steady:#65747d}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#dce9ef,#f5f7f8 320px);color:var(--text)}header{background:linear-gradient(135deg,#102c41,#214d68);color:#fff;padding:20px max(4vw,20px);display:flex;justify-content:space-between;align-items:center;border-bottom:5px solid #47a9cc}header h1{margin:0;font-size:clamp(1.65rem,3.3vw,2.7rem)}header p{margin:.3rem 0 0;color:#d2e5ee}nav a{display:inline-block;color:#fff;text-decoration:none;padding:.55rem .7rem;border:1px solid #7895a7;margin-left:.3rem;border-radius:3px}nav a.active{background:#fff;color:var(--nav)}main{max-width:1200px;margin:auto;padding:16px}.status{background:#fff;border:1px solid var(--line);padding:11px 14px;display:flex;gap:12px;align-items:center;box-shadow:0 2px 10px #102c4112;flex-wrap:wrap}.status #updated{margin-left:auto}.status span:not(.dot){color:var(--muted);font-size:.9rem}.dot{width:11px;height:11px;border-radius:50%;background:#25a65a;box-shadow:0 0 0 4px #25a65a20}.dot.stale{background:#d69a20}.alert{margin-top:12px;padding:12px;background:#fff2cf;border:1px solid #dfb95b}.hidden{display:none}.dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.card{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--accent);padding:16px;box-shadow:0 3px 14px #17324614;min-height:215px}.card h2{margin:0 0 13px;text-transform:uppercase;letter-spacing:.05em;font-size:1rem;color:#405e71}.hero{grid-column:span 2}.value{font-size:clamp(3rem,7vw,5.6rem);font-weight:700;line-height:1}.value.compact{font-size:clamp(2.7rem,5vw,4.5rem)}.value small{font-size:.28em;color:var(--muted)}.value.small{font-size:2.6rem}.trend{margin-top:13px;padding:9px 10px;border-radius:3px;background:#edf2f4;font-weight:700}.trend.up{color:var(--up);background:#e7f5ec}.trend.down{color:var(--down);background:#f9e8e8}.trend.steady{color:var(--steady)}.stats{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}.metric{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0}.split{display:flex;justify-content:space-around;text-align:center;margin:25px 0}.wind-card{grid-row:span 2}.windrose{display:grid;place-items:center}.compass{width:170px;height:170px;border:8px double #7890a0;border-radius:50%;position:relative;display:grid;place-items:start center;font-weight:bold;padding:8px;background:radial-gradient(circle,#fff 58%,#edf3f6)}.compass .e,.compass .s,.compass .w{position:absolute}.compass .e{right:8px;top:70px}.compass .s{bottom:8px}.compass .w{left:8px;top:70px}.needle{position:absolute;width:4px;height:68px;background:#d13c3c;left:50%;top:50%;transform-origin:50% 0;transition:transform .6s}.needle:after{content:"";position:absolute;bottom:-10px;left:-5px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:14px solid #d13c3c}.windvalues{display:grid;gap:8px;text-align:center;margin-top:14px}.windvalues>b{font-size:2rem}.range{height:9px;background:#e4ebef;margin-top:22px;border-radius:9px;overflow:hidden}.range span{display:block;height:100%;background:linear-gradient(90deg,#79bfd8,#1687b8);transition:width .5s}.outlook,.rain-state{text-align:center;font-weight:700;color:#486879;margin-top:18px}.rain-state{padding:8px;background:#edf5f8}footer{text-align:center;color:var(--muted);padding:25px}@media(max-width:850px){.dashboard{grid-template-columns:1fr 1fr}.hero{grid-column:span 2}.wind-card{grid-row:auto}}@media(max-width:570px){header{align-items:flex-start}.dashboard{grid-template-columns:1fr}.hero{grid-column:auto}.card{min-height:auto}.status #updated{margin-left:0}.value{font-size:3.8rem}}
.header-actions{display:flex;align-items:center;gap:14px}.main-nav{display:flex;gap:5px}.main-nav a,.languages a{display:inline-block;color:#fff;text-decoration:none;padding:.55rem .7rem;border:1px solid #7895a7;border-radius:3px}.main-nav a.active,.languages a.active{background:#fff;color:var(--nav)}.languages{white-space:nowrap}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);padding:20px;margin-bottom:14px}.page-heading h2{margin:0 0 5px}.page-heading p{margin:0;color:var(--muted)}.button,.period{appearance:none;border:1px solid #7e9cac;background:#fff;color:var(--nav);padding:.65rem .9rem;border-radius:4px;text-decoration:none;font-weight:700;cursor:pointer}.button:hover,.period:hover,.period.active{background:var(--nav);color:#fff}.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);padding:12px;margin-bottom:14px}.toolbar-status{margin-left:auto;color:var(--muted)}.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.chart-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--accent);padding:14px;min-width:0}.chart-card.wide{grid-column:span 2}.chart-title{display:flex;justify-content:space-between;align-items:center}.chart-title h3{margin:0;text-transform:uppercase;font-size:.95rem;letter-spacing:.04em}.chart-title span{color:var(--muted)}.svg-chart{min-height:280px;position:relative}.svg-chart svg{width:100%;height:auto;display:block}.grid-line{stroke:#dbe5ea;stroke-width:1}.axis-label{font-size:12px;fill:#6b7f8b}.series{stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.series-0{stroke:#1885b5}.series-1{stroke:#c94b4b}.chart-legend{position:absolute;right:8px;top:6px;display:flex;gap:12px;font-size:.82rem}.chart-legend i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:5px}.legend-0{background:#1885b5}.legend-1{background:#c94b4b}.empty-chart{display:grid;place-items:center;height:270px;color:var(--muted)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.summary-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--accent);padding:16px}.summary-card h3{margin:0 0 12px;text-transform:uppercase;font-size:1rem}.summary-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.summary-row:last-child{border-bottom:0}.summary-row span{color:var(--muted)}
@media(max-width:900px){.header-actions{align-items:flex-end;flex-direction:column}.main-nav{flex-wrap:wrap;justify-content:flex-end}.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){header{display:block}.header-actions{align-items:flex-start;margin-top:14px}.main-nav{justify-content:flex-start}.page-heading{align-items:flex-start;flex-direction:column}.charts-grid,.stats-grid{grid-template-columns:1fr}.chart-card.wide{grid-column:auto}.toolbar-status{width:100%;margin-left:0}.svg-chart{min-height:230px}.axis-label{font-size:14px}}

/* Consolidated legacy dashboard layer */

.v03-grid{
    display:grid;
    grid-template-columns:minmax(320px,.9fr) minmax(420px,1.6fr);
    gap:18px;
    margin-top:18px;
}
.history-card,.chart-card{min-width:0}
.history-table{width:100%;border-collapse:collapse;font-size:.96rem}
.history-table th,.history-table td{padding:9px 8px;border-bottom:1px solid rgba(90,110,135,.18);text-align:left}
.history-table th:nth-child(2),.history-table td:nth-child(2),
.history-table th:nth-child(3),.history-table td:nth-child(3){text-align:right}
.history-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.72}
.history-change{font-weight:800}
.history-change.positive,.trend-up{color:#128443}
.history-change.negative,.trend-down{color:#c43b3b}
.history-change.neutral,.trend-flat{color:#68788a}
.v03-message{margin:12px 0 0;opacity:.7}
.chart-box{width:100%;min-height:280px}
.chart-box svg{display:block;width:100%;height:auto;overflow:visible}
.chart-line{fill:none;stroke:#095ba7;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.chart-area{fill:rgba(30,136,229,.14)}
.chart-grid-line{stroke:rgba(85,105,130,.22);stroke-width:1;stroke-dasharray:5 6}
.chart-label{font-size:13px;fill:currentColor;opacity:.7}
.chart-summary{display:flex;justify-content:space-between;gap:12px;padding-top:8px;font-size:.92rem}
.trend{font-weight:750}
@media (max-width:900px){
    .v03-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
    .history-table{font-size:.88rem}
    .history-table th,.history-table td{padding:8px 4px}
    .chart-box{min-height:220px}
}

.pressure-chart-line{
    fill:none;
    stroke:#6b4ab7;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.pressure-chart-area{
    fill:rgba(107,74,183,.13);
}
.pressure-history-change{
    font-weight:800;
}
.pressure-history-change.positive{color:#128443}
.pressure-history-change.negative{color:#c43b3b}
.pressure-history-change.neutral{color:#68788a}
.pressure-v04{margin-top:18px}

/* Consolidated legacy dashboard layer */

:root{
    --v05-blue:#0a5da8;
    --v05-green:#128443;
    --v05-red:#c43b3b;
    --v05-muted:#6c7a89;
}
.dashboard-grid .card,
.v05-card{
    border-radius:14px;
    box-shadow:0 8px 24px rgba(22,46,72,.08);
}
.v05-section{
    margin-top:20px;
}
.v05-section-title{
    margin:0 0 12px;
    font-size:1.15rem;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.v05-history-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(320px,1fr));
    gap:18px;
}
.v05-history-table{
    width:100%;
    border-collapse:collapse;
}
.v05-history-table th,
.v05-history-table td{
    padding:9px 7px;
    border-bottom:1px solid rgba(80,105,130,.18);
}
.v05-history-table th{
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    opacity:.7;
}
.v05-history-table th:nth-child(n+2),
.v05-history-table td:nth-child(n+2){
    text-align:right;
}
.metric-change{
    font-weight:800;
}
.metric-change.positive{color:var(--v05-green)}
.metric-change.negative{color:var(--v05-red)}
.metric-change.neutral{color:var(--v05-muted)}
.v05-charts-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(360px,1fr));
    gap:18px;
}
.v05-chart-card{
    min-width:0;
}
.v05-chart-card.wide{
    grid-column:1/-1;
}
.v05-chart-wrap{
    width:100%;
    min-height:250px;
}
.v05-chart-wrap svg{
    width:100%;
    height:auto;
    display:block;
    overflow:visible;
}
.v05-chart-line{
    fill:none;
    stroke:var(--v05-blue);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.v05-chart-area{
    fill:rgba(10,93,168,.12);
}
.v05-chart-card.pressure .v05-chart-line{stroke:#7048b8}
.v05-chart-card.pressure .v05-chart-area{fill:rgba(112,72,184,.12)}
.v05-chart-card.humidity .v05-chart-line{stroke:#149db8}
.v05-chart-card.humidity .v05-chart-area{fill:rgba(20,157,184,.12)}
.v05-chart-card.wind .v05-chart-line{stroke:#6f7e8d}
.v05-chart-card.wind .v05-chart-area{fill:rgba(111,126,141,.13)}
.v05-chart-card.rain .v05-chart-line{stroke:#2377d1}
.v05-chart-card.rain .v05-chart-area{fill:rgba(35,119,209,.14)}
.v05-chart-card.uv .v05-chart-line{stroke:#d38313}
.v05-chart-card.uv .v05-chart-area{fill:rgba(211,131,19,.14)}
.v05-chart-card.solar .v05-chart-line{stroke:#d3a500}
.v05-chart-card.solar .v05-chart-area{fill:rgba(211,165,0,.14)}
.v05-grid-line{
    stroke:rgba(80,105,130,.22);
    stroke-width:1;
    stroke-dasharray:5 6;
}
.v05-axis-label{
    font-size:13px;
    fill:currentColor;
    opacity:.68;
}
.v05-chart-summary{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding-top:8px;
    font-size:.9rem;
}
.v05-message{
    margin:10px 0 0;
    color:var(--v05-muted);
}
@media (max-width:950px){
    .v05-history-grid,
    .v05-charts-grid{
        grid-template-columns:1fr;
    }
    .v05-chart-card.wide{
        grid-column:auto;
    }
}
@media (max-width:560px){
    .v05-history-grid{grid-template-columns:1fr}
    .v05-history-table{font-size:.86rem}
    .v05-history-table th,.v05-history-table td{padding:8px 4px}
    .v05-chart-wrap{min-height:210px}
}

/* Consolidated legacy dashboard layer */

.mb-v09-section{
    margin-top:22px;
}
.mb-v09-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:12px;
}
.mb-v09-heading h2{
    margin:0;
}
.mb-v09-status{
    font-size:.82rem;
    color:#6b7280;
}
.mb-v09-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(330px,1fr));
    gap:18px;
}
.mb-v09-card{
    border-radius:14px;
    box-shadow:0 8px 24px rgba(22,46,72,.08);
    overflow:hidden;
}
.mb-v09-card h2{
    margin-bottom:12px;
}
.mb-v09-table{
    width:100%;
    border-collapse:collapse;
}
.mb-v09-table th,
.mb-v09-table td{
    padding:9px 7px;
    border-bottom:1px solid rgba(80,105,130,.18);
}
.mb-v09-table th{
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    opacity:.72;
}
.mb-v09-table th:nth-child(n+2),
.mb-v09-table td:nth-child(n+2){
    text-align:right;
}
.mb-change{
    font-weight:800;
}
.mb-change.positive{
    color:#168746;
}
.mb-change.negative{
    color:#c33b3b;
}
.mb-change.stable{
    color:#c58a00;
}
.mb-min{
    color:#2563a8;
    font-weight:700;
    text-align:right;
}
.mb-max{
    color:#c33b3b;
    font-weight:700;
    text-align:right;
}
.mb-rain-list{
    display:grid;
}
.mb-rain-row{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:11px 0;
    border-bottom:1px solid rgba(80,105,130,.18);
}
.mb-rain-row strong{
    font-variant-numeric:tabular-nums;
}
.mb-v09-error{
    margin:12px 0 0;
    padding:10px 12px;
    border:1px solid rgba(195,59,59,.35);
    border-radius:8px;
    background:rgba(195,59,59,.07);
    color:#9f2929;
}
@media (max-width:900px){
    .mb-v09-grid{
        grid-template-columns:1fr;
    }
}


/* v0.91: Meteobridge tables integrated into the upper widgets */
.widget-history-block{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(80,105,130,.18);
}
.widget-history-block h3{
    margin:0 0 8px;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.055em;
    color:#4b5d70;
}
.widget-history-table{
    font-size:.83rem;
}
.widget-history-table th,
.widget-history-table td{
    padding:7px 4px;
}
.widget-seven-day{
    margin-top:12px;
}
.widget-rain-list .mb-rain-row{
    padding:8px 0;
}
.mb-widget-source{
    margin-left:8px;
    font-size:.75rem;
    opacity:.65;
}
.widget-mb-error{
    margin-top:12px;
}
.dashboard .card:has(.widget-history-block){
    align-self:start;
}
@media (max-width:560px){
    .widget-history-table{
        font-size:.78rem;
    }
    .widget-history-table th,
    .widget-history-table td{
        padding:6px 2px;
    }
}


/* v0.92: Historie und 7-Tage-Temperatur nebeneinander */
.temperature-detail-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:16px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(80,105,130,.18);
}

.temperature-detail-grid .widget-history-block{
    min-width:0;
    margin-top:0;
    padding-top:0;
    border-top:0;
}

.temperature-detail-grid .widget-seven-day{
    margin-top:0;
}

@media (max-width:900px){
    .temperature-detail-grid{
        grid-template-columns:1fr;
    }
}


/* v0.92.3: vollständig bereinigtes Regen-Widget */
.rain-widget-clean .rain-state{
    margin:4px 0 10px;
    font-weight:700;
    color:#526273;
}
.rain-widget-clean .widget-rain-list{
    margin-top:0;
}
.rain-widget-clean .mb-rain-row:first-child{
    border-top:1px solid rgba(80,105,130,.18);
}
.rain-widget-clean .mb-rain-row{
    padding:9px 0;
}


/* v0.93: Regenstatus */
.rain-widget-clean .rain-state.is-raining{
    color:#1477c9;
    font-weight:800;
}

.rain-widget-clean .rain-state.is-dry{
    color:#526273;
}

/* Consolidated legacy dashboard layer */

/* METEO SANTA SUSANNA v0.94 */
.dashboard > .card,
.dashboard-grid > .card,
.card{
    border-radius:20px !important;
    overflow:hidden;
}
.card{
    border:1px solid rgba(83,105,128,.18);
    box-shadow:0 10px 30px rgba(25,48,73,.08),0 2px 7px rgba(25,48,73,.05);
}
.current-value-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:4px;
}
.current-value-row > .value{
    margin:0;
    flex:1 1 auto;
}
.current-value-row > .trend{
    flex:0 0 auto;
    max-width:48%;
    margin:0;
    padding:7px 10px;
    border-radius:12px;
    background:rgba(91,111,132,.07);
    text-align:right;
    font-size:.88rem;
    line-height:1.25;
}
.wind-current-row{align-items:flex-start}
.wind-current-row .windvalues{flex:1 1 auto}
.uv-current-row{align-items:center}
.uv-current-row .split{flex:1 1 auto}
.embedded-chart{
    margin-top:15px;
    padding-top:13px;
    border-top:1px solid rgba(83,105,128,.16);
}
.embedded-chart .v05-chart-wrap{min-height:170px}
.embedded-chart svg{
    display:block;
    width:100%;
    height:auto;
    max-height:220px;
    overflow:visible;
}
.embedded-chart .v05-chart-summary{
    padding-top:4px;
    font-size:.78rem;
}
.embedded-chart h3{
    margin:0 0 5px;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#526273;
}
.uv-solar-chart-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:10px;
}
.widget-history-block{
    padding:12px !important;
    border:1px solid rgba(83,105,128,.18) !important;
    border-radius:15px;
    background:rgba(248,250,252,.72);
}
.temperature-detail-grid{
    border-top:0 !important;
    padding-top:0 !important;
}
.temperature-detail-grid .widget-history-block{
    padding:12px !important;
    border:1px solid rgba(83,105,128,.18) !important;
}
.widget-history-table{
    overflow:hidden;
    border-radius:10px;
}
.mb-rain-list{
    border:1px solid rgba(83,105,128,.18);
    border-radius:14px;
    overflow:hidden;
    background:rgba(248,250,252,.72);
}
.mb-rain-row{
    padding-left:10px !important;
    padding-right:10px !important;
}
.v05-chart-line.chart-draw-ready{
    transition:stroke-dashoffset 1.35s cubic-bezier(.2,.75,.25,1);
}
.v05-chart-area.chart-area-ready{
    opacity:0;
    transition:opacity .8s ease .55s;
}
.v05-chart-area.chart-area-visible{opacity:1}
@media (min-width:1100px){
    .uv-solar-chart-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
    .current-value-row{align-items:flex-start}
    .current-value-row > .trend{
        max-width:52%;
        font-size:.78rem;
        padding:6px 8px;
    }
    .embedded-chart .v05-chart-wrap{min-height:145px}
    .embedded-chart svg{max-height:185px}
}

/* Consolidated legacy dashboard layer */

/* METEO SANTA SUSANNA v0.95 */

/* 1. Temperaturgrafik rot */
.embedded-chart.temperature .v05-chart-line{
    stroke:#d33b3b !important;
}
.embedded-chart.temperature .v05-chart-area{
    fill:rgba(211,59,59,.14) !important;
}

/* 2. Regen bleibt blau; Null ist die feste Untergrenze */
.embedded-chart.rain .v05-chart-line{
    stroke:#2377d1 !important;
}
.embedded-chart.rain .v05-chart-area{
    fill:rgba(35,119,209,.14) !important;
}

/* 3. Aufgeräumtes Wind-Widget */
.wind-card-v095{
    display:block;
}

.wind-overview{
    display:grid;
    grid-template-columns:minmax(150px,.75fr) minmax(220px,1.25fr);
    gap:22px;
    align-items:center;
}

.wind-compass-column{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.wind-card-v095 .windrose{
    margin:0 auto;
}

.wind-direction-line{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    margin-top:8px;
    font-size:.85rem;
    color:#596a7b;
}

.wind-direction-line strong{
    color:#17212b;
}

.wind-data-column{
    min-width:0;
}

.wind-main-row{
    margin-bottom:12px;
}

.wind-main-value{
    white-space:nowrap;
}

.wind-main-value span{
    font-size:2.45rem;
    font-weight:800;
    line-height:1;
}

.wind-main-value small{
    margin-left:5px;
    font-size:.92rem;
    font-weight:600;
}

.wind-details-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}

.wind-detail{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:9px 10px;
    border:1px solid rgba(83,105,128,.16);
    border-radius:12px;
    background:rgba(248,250,252,.72);
    min-width:0;
}

.wind-detail span{
    font-size:.76rem;
    color:#607080;
}

.wind-detail strong{
    font-size:.9rem;
    color:#17212b;
    white-space:nowrap;
}

.wind-card-v095 .embedded-chart{
    margin-top:16px;
}

.wind-card-v095 .widget-history-block{
    margin-top:16px;
}

@media (max-width:760px){
    .wind-overview{
        grid-template-columns:1fr;
        gap:14px;
    }

    .wind-data-column{
        width:100%;
    }

    .wind-details-grid{
        grid-template-columns:1fr;
    }

    .wind-detail{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }
}

@media (max-width:420px){
    .wind-main-value span{
        font-size:2rem;
    }

    .wind-main-row{
        align-items:flex-start;
    }
}

/* Consolidated legacy dashboard layer */

/* METEO SANTA SUSANNA v0.96 */

/* Luftdruck kompakter und Einheit direkt neben dem Wert */
.pressure-card-v096 .current-value-row{
    align-items:center;
    gap:10px;
}

.pressure-card-v096 .value.compact{
    display:flex;
    align-items:baseline;
    gap:7px;
    min-width:0;
}

.pressure-card-v096 .value.compact span{
    font-size:3.35rem !important;
    line-height:.95;
    letter-spacing:-.035em;
    white-space:nowrap;
}

.pressure-card-v096 .value.compact small{
    display:inline !important;
    margin:0 !important;
    font-size:1rem !important;
    line-height:1;
    white-space:nowrap;
}

.pressure-card-v096 .current-value-row > .trend{
    max-width:42%;
    flex:0 1 auto;
    font-size:.78rem;
    padding:6px 8px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Wind kompakter und vollständig innerhalb des Widgets */
.wind-card-v096 .wind-overview{
    grid-template-columns:minmax(125px,.62fr) minmax(210px,1.38fr);
    gap:14px;
}

.wind-card-v096 .windrose,
.wind-card-v096 .compass{
    transform:scale(.84);
    transform-origin:center;
}

.wind-card-v096 .wind-compass-column{
    margin:-10px 0;
}

.wind-card-v096 .wind-main-value span{
    font-size:2.15rem;
}

.wind-card-v096 .current-value-row > .trend{
    max-width:45%;
    font-size:.76rem;
    padding:6px 8px;
    white-space:normal;
}

.wind-card-v096 .wind-details-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}

.wind-card-v096 .wind-detail{
    padding:7px 8px;
}

.wind-card-v096 .wind-detail span{
    font-size:.68rem;
}

.wind-card-v096 .wind-detail strong{
    font-size:.8rem;
}

/* Oberste Widget-Reihe auf Desktop gleich hoch */
@media (min-width:1000px){
    .temperature-card-v096,
    .humidity-card-v096{
        min-height:100%;
        height:100%;
    }

    .pressure-card-v096,
    .wind-card-v096{
        min-height:100%;
        height:100%;
    }

    .temperature-card-v096,
    .humidity-card-v096,
    .pressure-card-v096,
    .wind-card-v096{
        display:flex;
        flex-direction:column;
    }

    .temperature-card-v096 .embedded-chart,
    .humidity-card-v096 .embedded-chart,
    .pressure-card-v096 .embedded-chart,
    .wind-card-v096 .embedded-chart{
        margin-top:auto;
    }
}

/* Einheitliche Innenabstände */
.temperature-card-v096,
.humidity-card-v096,
.pressure-card-v096,
.wind-card-v096{
    padding:16px;
}

/* Noch engere Darstellung auf mittleren Desktopbreiten */
@media (min-width:900px) and (max-width:1250px){
    .pressure-card-v096 .value.compact span{
        font-size:2.9rem !important;
    }

    .pressure-card-v096 .current-value-row > .trend{
        max-width:40%;
        font-size:.72rem;
    }

    .wind-card-v096 .wind-overview{
        grid-template-columns:minmax(110px,.55fr) minmax(190px,1.45fr);
        gap:10px;
    }

    .wind-card-v096 .windrose,
    .wind-card-v096 .compass{
        transform:scale(.76);
    }

    .wind-card-v096 .wind-main-value span{
        font-size:1.9rem;
    }

    .wind-card-v096 .wind-detail{
        padding:6px;
    }
}

@media (max-width:760px){
    .pressure-card-v096 .value.compact span{
        font-size:2.65rem !important;
    }

    .pressure-card-v096 .current-value-row{
        align-items:flex-start;
    }

    .pressure-card-v096 .current-value-row > .trend{
        max-width:48%;
        white-space:normal;
    }

    .wind-card-v096 .windrose,
    .wind-card-v096 .compass{
        transform:scale(.82);
    }

    .wind-card-v096 .wind-details-grid{
        grid-template-columns:1fr;
    }
}

/* Consolidated legacy dashboard layer */

/* METEO SANTA SUSANNA v0.97 */

.widget-seven-day-wind,
.widget-seven-day-rain{
    margin-top:16px;
}

.widget-seven-day-wind td,
.widget-seven-day-wind th{
    white-space:nowrap;
}

.widget-seven-day-wind .mb-wind-max{
    color:#df7b12;
    font-weight:700;
}

.widget-seven-day-wind .mb-wind-avg{
    color:#4b5d70;
    font-weight:600;
}

.widget-seven-day-rain td:last-child,
.widget-seven-day-rain th:last-child{
    text-align:right;
}

.widget-seven-day-rain .mb-rain-positive{
    color:#126dcc;
    font-weight:800;
}

.widget-seven-day-rain .mb-rain-zero{
    color:#17212b;
    font-weight:500;
}

@media (max-width:520px){
    .widget-seven-day-wind .widget-history-table{
        font-size:.72rem;
    }

    .widget-seven-day-wind td,
    .widget-seven-day-wind th{
        padding-left:2px;
        padding-right:2px;
    }
}

/* Consolidated legacy dashboard layer */

/* METEO SANTA SUSANNA v0.98 */

/*
 * Die in v0.96 eingeführte erzwungene Kartenhöhe hat bei Luftdruck und Wind
 * große Leerflächen erzeugt. Diese beiden Widgets wachsen jetzt wieder nur
 * entsprechend ihrem Inhalt.
 */
.pressure-card-v096,
.wind-card-v096,
.wind-card-v095{
    height:auto !important;
    min-height:0 !important;
    align-self:start !important;
}

/* Keine automatische Verdrängung der Grafiken an den unteren Kartenrand */
.pressure-card-v096 .embedded-chart,
.wind-card-v096 .embedded-chart,
.wind-card-v095 .embedded-chart{
    margin-top:16px !important;
}

/* Luftdruck: Historik und Grafik ohne künstliche Zwischenräume */
.pressure-card-v096 .widget-history-block{
    margin-bottom:0;
}

.pressure-card-v096 .embedded-chart{
    padding-top:14px;
}

/* Wind: Übersicht, Tabellen und Grafik in natürlichem vertikalem Fluss */
.wind-card-v096 .wind-overview,
.wind-card-v095 .wind-overview{
    margin-bottom:14px;
}

.wind-card-v096 .widget-history-block,
.wind-card-v095 .widget-history-block{
    margin-top:14px;
}

.wind-card-v096 .widget-seven-day-wind,
.wind-card-v095 .widget-seven-day-wind{
    margin-top:14px;
}

.wind-card-v096 .embedded-chart,
.wind-card-v095 .embedded-chart{
    margin-top:14px !important;
}

/* Regen: 7-Tage-Tabelle direkt vor der Grafik */
.rain-widget-clean .widget-seven-day-rain{
    margin-top:14px;
    margin-bottom:0;
}

.rain-widget-clean .embedded-chart{
    margin-top:14px;
}

/* Das gesamte Desktop-Raster soll Karten oben ausrichten, nicht strecken */
@media (min-width:1000px){
    .dashboard,
    .dashboard-grid{
        align-items:start !important;
    }

    .pressure-card-v096,
    .wind-card-v096,
    .wind-card-v095,
    .rain-widget-clean{
        height:auto !important;
        min-height:0 !important;
    }
}

/* Consolidated former dashboard inline layer */
/* METEO SANTA SUSANNA v0.996 */

.dashboard-v0996{
    width:100%;
}

.v0996-top-grid{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    gap:16px;
    align-items:stretch;
    margin-bottom:16px;
}

.v0996-top-grid > .card{
    width:100%;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
}

.v0996-lower-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    align-items:start;
}

.v0996-column{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
}

.v0996-column > .card{
    width:100%;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    align-self:stretch !important;
}

/* Exact desktop order:
   Temperature | Humidity
   Pressure    | Wind | Rain
   UV/Solar    |      | Webcam
*/

/* Webcam */
.v0996-webcam{
    padding:14px;
}

.v0996-webcam h2{
    margin-bottom:10px;
}

.v0996-webcam-link{
    display:block;
    overflow:hidden;
    border:1px solid rgba(83,105,128,.18);
    border-radius:14px;
    background:#e7edf2;
    line-height:0;
}

.v0996-webcam-image{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    transition:opacity .25s ease,transform .35s ease;
}

.v0996-webcam-image.is-refreshing{
    opacity:.65;
}

.v0996-webcam-link:hover .v0996-webcam-image{
    transform:scale(1.01);
}

.v0996-webcam-footer{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:10px;
    margin-top:8px;
    font-size:.72rem;
    line-height:1.35;
    color:#657587;
}

.v0996-webcam-footer strong{
    color:#263746;
}

.v0996-webcam-footer a{
    color:#246ba8;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
}

/* Compact rain card */
.v0996-rain .mb-rain-row{
    padding-top:6px !important;
    padding-bottom:6px !important;
}

.v0996-rain .widget-seven-day-rain{
    padding:9px !important;
}

.v0996-rain .embedded-chart .v05-chart-wrap{
    min-height:118px !important;
}

.v0996-rain .embedded-chart svg{
    max-height:148px !important;
}

@media (max-width:1050px){
    .v0996-top-grid{
        grid-template-columns:1fr;
    }

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

    .v0996-right{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-items:start;
    }
}

@media (max-width:720px){
    .v0996-lower-grid{
        grid-template-columns:1fr;
    }

    .v0996-right{
        grid-column:auto;
        display:flex;
    }

    .v0996-webcam-footer{
        align-items:flex-start;
        flex-direction:column;
    }
}


/* METEO SANTA SUSANNA v0.997
   Temperatur und Luftfeuchtigkeit sauber nebeneinander */

@media (min-width:1051px){
    .v0996-top-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        align-items:stretch !important;
    }

    .v0996-temperature,
    .v0996-humidity{
        width:100% !important;
        min-width:0 !important;
        height:100% !important;
        align-self:stretch !important;
        overflow:hidden;
    }

    .v0996-temperature,
    .v0996-humidity{
        display:flex !important;
        flex-direction:column;
    }

    /* Historik und 7-Tage-Tabelle bleiben nebeneinander,
       dürfen aber innerhalb der halben Seitenbreite schrumpfen. */
    .v0996-temperature .temperature-detail-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:10px !important;
    }

    .v0996-temperature .widget-history-block{
        min-width:0 !important;
        padding:9px !important;
    }

    .v0996-temperature .widget-history-table{
        width:100%;
        table-layout:fixed;
        font-size:.75rem !important;
    }

    .v0996-temperature .widget-history-table th,
    .v0996-temperature .widget-history-table td{
        padding:5px 2px !important;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .v0996-temperature .widget-history-table th:first-child,
    .v0996-temperature .widget-history-table td:first-child{
        width:35%;
        text-align:left;
    }

    .v0996-temperature .widget-history-table th:nth-child(2),
    .v0996-temperature .widget-history-table td:nth-child(2){
        width:29%;
    }

    .v0996-temperature .widget-history-table th:nth-child(3),
    .v0996-temperature .widget-history-table td:nth-child(3){
        width:36%;
    }

    /* Große Messwerte und 15-Minuten-Tendenz etwas kompakter */
    .v0996-temperature .current-value-row,
    .v0996-humidity .current-value-row{
        gap:10px !important;
    }

    .v0996-temperature .current-value-row > .trend,
    .v0996-humidity .current-value-row > .trend{
        max-width:44% !important;
        font-size:.76rem !important;
        padding:6px 8px !important;
        white-space:normal !important;
    }

    .v0996-temperature .value > span,
    .v0996-humidity .value > span{
        font-size:3.7rem !important;
    }

    /* Grafiken am unteren Bereich ausrichten, damit beide Karten gleich hoch wirken */
    .v0996-temperature .embedded-chart,
    .v0996-humidity .embedded-chart{
        margin-top:auto !important;
        padding-top:12px;
    }

    .v0996-temperature .embedded-chart .v05-chart-wrap,
    .v0996-humidity .embedded-chart .v05-chart-wrap{
        min-height:150px !important;
    }

    .v0996-temperature .embedded-chart svg,
    .v0996-humidity .embedded-chart svg{
        max-height:185px !important;
    }
}

/* Auf mittleren Bildschirmen bleiben beide Widgets ebenfalls nebeneinander,
   solange genug Platz vorhanden ist. */
@media (min-width:800px) and (max-width:1050px){
    .v0996-top-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    }

    .v0996-temperature .temperature-detail-grid{
        grid-template-columns:1fr !important;
    }

    .v0996-temperature .widget-history-table{
        font-size:.72rem !important;
    }

    .v0996-temperature .value > span,
    .v0996-humidity .value > span{
        font-size:3rem !important;
    }
}

/* Smartphone: wieder untereinander */
@media (max-width:799px){
    .v0996-top-grid{
        grid-template-columns:1fr !important;
    }
}

/* Consolidated former hero inline layer */
/* v0.998 – Hero-Regel im oberen 50/50-Raster neutralisieren */
@media (min-width:800px){
    .v0996-top-grid > .v0996-temperature,
    .v0996-top-grid > .v0996-humidity{
        grid-column:auto !important;
        grid-row:auto !important;
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
    }

    .v0996-top-grid > .hero{
        grid-column:auto !important;
        grid-row:auto !important;
    }

    .v0996-top-grid{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:16px !important;
        align-items:stretch !important;
    }
}

/* Consolidated later dashboard layer */

/* METEO SANTA SUSANNA v0.999 */

/* Mehr Luft zwischen Live-Leiste / Warnung und Dashboard */
.status{
    margin-bottom:12px !important;
}

.weather-warning-v0999{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:14px auto 24px;
    max-width:1200px;
    padding:10px 14px;
    border:1px solid #b4232b;
    border-radius:12px;
    background:linear-gradient(180deg,#fff0f1 0%,#ffe5e7 100%);
    color:#8f1820;
    box-shadow:0 5px 16px rgba(143,24,32,.08);
}

.weather-warning-v0999 strong{
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    white-space:nowrap;
}

.weather-warning-v0999 span{
    font-size:.82rem;
    text-align:right;
}

/* Dashboard beginnt mit deutlichem Abstand */
.dashboard-v0996{
    margin-top:0 !important;
}

/* Einheitliche Kartenoptik */
.dashboard-v0996 .card{
    border-radius:20px !important;
    padding:16px !important;
}

.dashboard-v0996 .card > h2{
    min-height:28px;
    margin-bottom:12px;
}

/* Obere Reihe weiterhin 50/50 */
@media (min-width:800px){
    .v0996-top-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:16px !important;
        align-items:stretch !important;
    }

    .v0996-top-grid > .card{
        height:100% !important;
    }
}

/*
 * Untere Reihe exakt ausgleichen:
 * Luftdruck | Wind | Regen
 */
@media (min-width:1051px){
    .v0996-lower-grid{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:16px !important;
        align-items:stretch !important;
    }

    .v0996-left,
    .v0996-center,
    .v0996-right{
        display:grid !important;
        grid-template-rows:auto auto;
        gap:16px !important;
        align-content:start;
        min-width:0;
    }

    /* Die drei oberen unteren Widgets gleich hoch */
    .v0996-pressure,
    .v0996-wind,
    .v0996-rain{
        min-height:820px !important;
        height:820px !important;
        display:flex !important;
        flex-direction:column;
        overflow:hidden;
    }

    /* Diagramme in den drei Widgets auf gleiche Grundhöhe bringen */
    .v0996-pressure .embedded-chart,
    .v0996-wind .embedded-chart,
    .v0996-rain .embedded-chart{
        margin-top:auto !important;
        padding-top:12px !important;
    }

    .v0996-pressure .embedded-chart .v05-chart-wrap,
    .v0996-wind .embedded-chart .v05-chart-wrap,
    .v0996-rain .embedded-chart .v05-chart-wrap{
        min-height:145px !important;
        height:145px !important;
    }

    .v0996-pressure .embedded-chart svg,
    .v0996-wind .embedded-chart svg,
    .v0996-rain .embedded-chart svg{
        max-height:180px !important;
    }

    /* Untere zweite Ebene sauber angleichen */
    .v0996-uvsolar,
    .v0996-webcam{
        min-height:430px !important;
        height:430px !important;
        display:flex !important;
        flex-direction:column;
    }

    .v0996-webcam-link{
        flex:1 1 auto;
        min-height:0;
    }

    .v0996-webcam-image{
        width:100%;
        height:100% !important;
        object-fit:cover;
    }

    .v0996-uvsolar .uv-solar-chart-grid{
        margin-top:auto;
    }
}

/* Einheitliche Tabellen */
.dashboard-v0996 .widget-history-block{
    border-radius:15px !important;
    padding:11px !important;
}

.dashboard-v0996 .widget-history-table{
    width:100%;
    table-layout:fixed;
}

.dashboard-v0996 .widget-history-table th,
.dashboard-v0996 .widget-history-table td{
    padding-top:6px !important;
    padding-bottom:6px !important;
}

/* Regen bleibt etwas kompakter, ohne zu viel Leerraum */
.v0996-rain .mb-rain-row{
    padding-top:6px !important;
    padding-bottom:6px !important;
}

/* Tablet: keine festen Höhen */
@media (max-width:1050px){
    .v0996-pressure,
    .v0996-wind,
    .v0996-rain,
    .v0996-uvsolar,
    .v0996-webcam{
        min-height:0 !important;
        height:auto !important;
    }
}

/* Smartphone */
@media (max-width:799px){
    .weather-warning-v0999{
        align-items:flex-start;
        flex-direction:column;
        margin-bottom:18px;
    }

    .weather-warning-v0999 span{
        text-align:left;
    }
}

/* Consolidated later dashboard layer */

/* METEO SANTA SUSANNA v1.0.1 STABLE */

/* Dynamic warning */
.weather-warning-v101[hidden]{
    display:none !important;
}

.weather-warning-v101{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:14px 0 22px;
    padding:12px 15px;
    border:1px solid transparent;
    border-radius:13px;
    box-shadow:0 7px 20px rgba(65,25,25,.12);
}

.weather-warning-heading-v101{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.weather-warning-messages-v101{
    flex:1 1 auto;
    min-width:0;
}

.weather-warning-messages-v101 ul{
    margin:0;
    padding-left:18px;
}

.weather-warning-red{
    background:linear-gradient(180deg,#c20d18,#a7000b);
    color:#fff;
}

.weather-warning-orange{
    background:linear-gradient(180deg,#f58b14,#dc7000);
    color:#fff;
}

.weather-warning-yellow{
    background:linear-gradient(180deg,#ffe470,#ffd02c);
    color:#4b3900;
}

/*
 * Wind details stay inside their original container.
 * Only the layout is changed so they visually sit below Direcció.
 * No HTML containers are moved, therefore the outer dashboard grid
 * and webcam position remain untouched.
 */
.wind-card-stable-v101 .wind-overview{
    display:grid !important;
    grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr) !important;
    grid-template-areas:
        "compass data"
        "details details";
    gap:12px 14px !important;
    align-items:start !important;
}

.wind-card-stable-v101 .wind-compass-column{
    grid-area:compass;
}

.wind-card-stable-v101 .wind-data-column{
    grid-area:data;
    display:contents;
}

.wind-card-stable-v101 .wind-main-row{
    grid-area:data;
    align-self:start;
}

.wind-card-stable-v101 .wind-details-under-direction-v101{
    grid-area:details;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100%;
    margin-top:0 !important;
}

.wind-card-stable-v101 .wind-direction-line{
    margin-top:8px;
}

@media (max-width:760px){
    .weather-warning-v101{
        flex-direction:column;
    }

    .wind-card-stable-v101 .wind-overview{
        grid-template-columns:1fr !important;
        grid-template-areas:
            "compass"
            "data"
            "details";
    }

    .wind-card-stable-v101 .wind-details-under-direction-v101{
        grid-template-columns:1fr !important;
    }
}

/* Consolidated later dashboard layer */

/* METEO SANTA SUSANNA v1.0.2
   Ausschließlich kosmetische Dashboard-Korrekturen. */

/* 1. Mehr Abstand zwischen Direcció und den drei Wind-Infoboxen */
.wind-card-stable-v101 .wind-details-under-direction-v101{
    margin-top:18px !important;
}

/* 2. Windrose etwas nach links, damit der große Windwert frei bleibt */
@media (min-width:761px){
    .wind-card-stable-v101 .wind-compass-column{
        transform:translateX(-12px);
    }
}

/*
 * 3. Mehr Luft zwischen oberer Tabelle und Trennlinie der Grafik.
 * Betroffen: Temperatur, Luftdruck, Wind und Regen.
 * Luftfeuchtigkeit bleibt bewusst unverändert.
 *
 * Die bisherige obere Border wird durch eine tiefer sitzende Linie ersetzt.
 * So bleibt das bestehende Höhen-/Grid-Verhalten unangetastet.
 */
.v0996-temperature .embedded-chart,
.v0996-pressure .embedded-chart,
.v0996-wind .embedded-chart,
.v0996-rain .embedded-chart{
    position:relative;
    border-top:0 !important;
    padding-top:30px !important;
}

.v0996-temperature .embedded-chart::before,
.v0996-pressure .embedded-chart::before,
.v0996-wind .embedded-chart::before,
.v0996-rain .embedded-chart::before{
    content:"";
    position:absolute;
    top:14px;
    left:0;
    right:0;
    border-top:1px solid rgba(83,105,128,.16);
    pointer-events:none;
}

/* Auf kleinen Bildschirmen etwas kompakter, aber weiterhin sichtbar getrennt */
@media (max-width:760px){
    .wind-card-stable-v101 .wind-details-under-direction-v101{
        margin-top:14px !important;
    }

    .v0996-temperature .embedded-chart,
    .v0996-pressure .embedded-chart,
    .v0996-wind .embedded-chart,
    .v0996-rain .embedded-chart{
        padding-top:26px !important;
    }

    .v0996-temperature .embedded-chart::before,
    .v0996-pressure .embedded-chart::before,
    .v0996-wind .embedded-chart::before,
    .v0996-rain .embedded-chart::before{
        top:12px;
    }
}


/* v1.5.8i – dashboard webcam actions + live lightbox */
.v0996-webcam-link.v158i-webcam-lightbox-trigger{
    display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;font:inherit;
}
.v158i-webcam-actions{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.v158i-webcam-text-link{
    padding:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;
}
.v158i-webcam-lightbox[hidden]{display:none!important}
.v158i-webcam-lightbox{
    position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:18px;
}
.v158i-webcam-lightbox-backdrop{
    position:absolute;inset:0;background:rgba(4,11,16,.9);backdrop-filter:blur(3px);cursor:zoom-out;
}
.v158i-webcam-lightbox-dialog{
    position:relative;z-index:1;display:grid;place-items:center;width:min(96vw,1600px);height:min(94vh,1050px);
}
.v158i-webcam-lightbox-dialog img{
    display:block;max-width:100%;max-height:94vh;width:auto;height:auto;object-fit:contain;border-radius:12px;
    box-shadow:0 20px 65px rgba(0,0,0,.5);
}
.v158i-webcam-lightbox-close{
    position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(255,255,255,.4);background:rgba(10,26,36,.78);color:#fff;font-size:1.8rem;cursor:pointer;
}
.v158i-webcam-lightbox-open{overflow:hidden}
@media(max-width:600px){
    .v158i-webcam-lightbox{padding:7px}
    .v158i-webcam-lightbox-dialog{width:100%;height:97vh}
    .v158i-webcam-lightbox-dialog img{max-height:97vh;border-radius:8px}
}


/* v1.5.8j – Webcam-Footer zweizeilig und sauber zentriert */
.v0996-webcam-footer.v158j-webcam-footer{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:5px !important;
    margin-top:8px;
    text-align:center;
}
.v158j-webcam-status{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
    width:100%;
}
.v158j-webcam-status strong{
    white-space:nowrap;
}
.v158j-webcam-actions{
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap !important;
    gap:7px;
    width:100%;
    white-space:nowrap;
}
.v158j-webcam-actions a,
.v158j-webcam-actions button{
    white-space:nowrap;
}
@media(max-width:390px){
    .v158j-webcam-status{
        flex-direction:column;
        gap:1px;
    }
    .v158j-webcam-status .v158j-webcam-separator{
        display:none;
    }
    .v158j-webcam-actions{
        gap:5px;
        font-size:.68rem;
    }
}


/* v1.5.8k – Webcam-Linkverhalten wie im Footer */
.v158j-webcam-status .v158j-webcam-separator{display:none!important}
.v158j-webcam-actions .v158i-webcam-text-link,
.v158j-webcam-actions a{
    color:#246ba8 !important;
    font-weight:700;
    text-decoration:none !important;
}
.v158j-webcam-actions .v158i-webcam-text-link:hover,
.v158j-webcam-actions .v158i-webcam-text-link:focus-visible,
.v158j-webcam-actions a:hover,
.v158j-webcam-actions a:focus-visible{
    text-decoration:underline !important;
}

/* v1.5.9a – temperature colour scale / dynamic day-range bar */
.v0996-temperature .temperature-range{
    background:#e4ebef;
}
.v0996-temperature .temperature-range > span{
    background:#1687b8;
    transition:width .5s ease,background-color .35s ease;
}