/* =============================================================================================
   ELEMENT 29 – WETTER UND WEBCAMS
============================================================================================= */

.wf-element-29 {
    position: relative;
    width: 100%;
    color: #30251f;
}


/* =========================================
   ÜBERSCHRIFTEN
========================================= */

.wf-weather-title,
.wf-webcams-title {
    margin: 0 0 clamp(28px, 4vw, 48px);
    color: #30251f;
    font-size: clamp(1.7rem, 2.0vw, 2.1rem);
    font-weight: 400;
    line-height: 1.2;
	text-align:center;
}


/* =========================================
   WETTER
========================================= */

.wf-weather-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    xxborder-top: 1px solid rgba(48, 37, 31, 0.2);
    xxborder-bottom: 1px solid rgba(48, 37, 31, 0.2);
}

.wf-weather-day {
    min-width: 0;
    padding: clamp(25px, 3vw, 42px);
    border-right: 1px solid rgba(48, 37, 31, 0.16);
}

.wf-weather-day:last-child {
    border-right: 0;
}

.wf-weather-day-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 15px;
}

.wf-weather-day-title {
    margin: 0;
    color: #30251f;
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.3;
}

.wf-weather-minmax {
    color: #8a604a;
    font-size: 0.92rem;
    white-space: nowrap;
}

.wf-weather-times {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 20px;
    list-style: none;
}


.wf-weather-time {
    display: grid;
    grid-template-columns:
        90px
        minmax(0, 1fr)
        40px
        135px;
    grid-template-areas:
        "label . icon temperature"
        "label . icon description";
    align-items: center;
    column-gap: 10px;
}


.wf-weather-temperature,
.wf-weather-description {
    text-align: right;
}


.wf-weather-time-label {
    grid-area: label;
    color: #5f5955;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.wf-weather-icon {
    grid-area: icon;
    font-size: 1.45rem;
    line-height: 1;
    text-align: center;
}

.wf-weather-temperature {
    grid-area: temperature;
    color: #30251f;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}

.wf-weather-description {
    grid-area: description;
    margin-top: 2px;
    color: #77716d;
    font-size: 0.78rem;
    line-height: 1.3;
}

.wf-weather-loading,
.wf-weather-error {
    margin: 0;
    padding: 25px 0;
    color: #5f5955;
}


/* =========================================
   WEBCAMS
========================================= */

.wf-webcams {
     margin-top: clamp(55px, 7vw, 90px);
}

.wf-webcams-intro {
    max-width: 760px;
    margin: -20px 0 38px;
    color: rgba(48, 37, 31, 0.78);
    font-size: 1rem;
    line-height: 1.7;
}

.wf-webcams-intro > :first-child {
    margin-top: 0;
}

.wf-webcams-intro > :last-child {
    margin-bottom: 0;
}

.wf-webcams-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(25px, 4vw, 55px);
}

.wf-webcam {
    min-width: 0;
}

.wf-webcam-heading {
    margin-bottom: 18px;
}

.wf-webcam-title {
    margin: 0;
    color: #30251f;
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.3;
}

.wf-webcam-description {
    margin: 5px 0 0;
    color: #77716d;
    font-size: 0.88rem;
    line-height: 1.5;
}

.wf-webcam-frame {
    position: relative;
    width: 100%;
    height: clamp(280px, 27vw, 410px);
    overflow: hidden;
    background: #eeeae7;
}

.wf-webcam-frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;	
    border: 0;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .wf-weather-day {
        padding: 28px 22px;
    }

    .wf-weather-time {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label label"
            "icon temperature"
            "description description";
        row-gap: 5px;
    }

    .wf-weather-icon {
        text-align: left;
    }
}


/* =========================================
   SMARTPHONE
========================================= */

@media (max-width: 767px) {

    .wf-weather-title,
    .wf-webcams-title {
        margin-bottom: 25px;
        font-size: 1.65rem;
    }

    .wf-weather-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wf-weather-day {
        padding: 25px 4px;
        border-right: 0;
        border-bottom: 1px solid rgba(48, 37, 31, 0.16);
    }

    .wf-weather-day:last-child {
        border-bottom: 0;
    }

    .wf-weather-day-heading {
        margin-bottom: 22px;
    }

    .wf-weather-time {
        grid-template-columns: 70px 36px auto;
        grid-template-areas:
            "label icon temperature"
            "label icon description";
        row-gap: 0;
    }

    .wf-weather-icon {
        text-align: center;
    }

    .wf-webcams {
        margin-top: 65px;
    }

    .wf-webcams-intro {
        margin-top: -10px;
        margin-bottom: 28px;
        font-size: 0.95rem;
    }

    .wf-webcams-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 45px;
    }

    .wf-webcam-heading {
        margin-bottom: 14px;
    }
}