/*
 * ============================================================
 * MFC-Schlierbach e.V. - user.css
 * ============================================================
 *
 * Enthält:
 * - Header mit Logo + Vereinsname
 * - Webcam / Zeitraffer responsiv und verbreitert
 * - Windprognose unterhalb der Webcam
 * - dynamischer Windsack
 * - Vollbildfunktion der Webcam
 * - Hinweis "Klick auf das Bild für Vollbild"
 * - Tablet- und Smartphone-Anpassungen
 *
 * ARI Image Slider:
 *   ID 94 = Webcam / Zeitraffer
 *   ID 95 = aktuelles Webcam-Bild
 *
 * ============================================================
 */


/* ============================================================
   HEADER - LOGO + VEREINSNAME
   ============================================================ */

.header .brand {
    display: flex !important;
    align-items: center !important;

    gap: 18px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-decoration: none !important;
}


/* Vereinslogo */

.header .brand img {
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;

    display: block !important;

    flex: 0 0 120px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Vereinsname rechts neben dem Logo */

.header .brand::after {
    content: "MFC-Schlierbach e.V.";

    display: block;

    font-size: 36px;
    line-height: 1.1;

    font-weight: 400;

    color: #002b49;

    white-space: nowrap;
}


/* ============================================================
   WEBCAM + ZEITRAFFER
   ============================================================ */

#ais_94_wrapper,
#ais_95_wrapper {
    /*
     * Webcam nutzt den ansonsten freien Bereich rechts mit.
     */
    width: 134% !important;
    max-width: none !important;

    height: auto !important;

    margin-top: 20px !important;
    margin-right: 0 !important;

    /*
     * Platz für:
     * links Vollbild-Hinweis
     * rechts Windprognose
     */
    margin-bottom: 125px !important;

    margin-left: 0 !important;

    overflow: visible !important;

    position: relative !important;

    box-sizing: border-box !important;
}


/* ============================================================
   ARI / NIVO SLIDER
   ============================================================ */

#ais_94.ari-image-slider.nivoSlider,
#ais_95.ari-image-slider.nivoSlider {
    width: 100% !important;
    max-width: none !important;

    height: auto !important;

    /*
     * Panoramaformat der Webcam.
     */
    aspect-ratio: 32 / 9;

    margin: 0 !important;

    overflow: hidden !important;

    position: relative !important;

    box-sizing: border-box !important;
}


/* ============================================================
   WEBCAM-BILDER
   ============================================================ */

#ais_94 img,
#ais_94 img.ari-image-slider-image,
#ais_94 img.nivo-main-image,
#ais_95 img,
#ais_95 img.ari-image-slider-image,
#ais_95 img.nivo-main-image {
    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    max-height: 100% !important;

    object-fit: cover !important;

    display: block !important;

    box-sizing: border-box !important;
}


#ais_94_wrapper img,
#ais_95_wrapper img {
    max-width: 100% !important;
}


/* ============================================================
   NIVO-ANIMATIONSELEMENTE
   ============================================================ */

#ais_94 .nivo-slice,
#ais_94 .nivo-box,
#ais_95 .nivo-slice,
#ais_95 .nivo-box {
    max-width: 100% !important;

    overflow: hidden !important;
}


/* ============================================================
   ALTE WINDSACK-LUPE DEAKTIVIEREN
   ============================================================ */

#ais_94_wrapper::before,
#ais_94_wrapper::after,
#ais_95_wrapper::before,
#ais_95_wrapper::after {
    content: none !important;

    display: none !important;
}


/* ============================================================
   WINDPROGNOSE - BOX
   ============================================================ */

.mfc-wind-overlay {
    position: absolute !important;

    /*
     * Unterhalb des Webcam-Bildes rechts.
     */
    top: calc(100% + 10px) !important;
    right: 0 !important;

    width: 285px !important;

    padding: 11px 14px 9px 14px;

    border-radius: 10px;

    background: rgba(18, 28, 40, 0.86);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25);

    color: #ffffff;

    z-index: 100;

    pointer-events: none;

    box-sizing: border-box;
}


/* ============================================================
   WINDPROGNOSE - TITEL
   ============================================================ */

.mfc-wind-overlay__title {
    margin: 0 0 8px 0;

    padding-bottom: 6px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.18);

    font-size: 12px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.94);

    white-space: nowrap;
}


/* ============================================================
   WINDPROGNOSE - INHALT
   ============================================================
 *
 * Zwei Spalten:
 *
 * Windsack | Windwerte
 *
 * ============================================================ */

.mfc-wind-overlay__content {
    display: grid !important;

    grid-template-columns:
        100px 1fr !important;

    column-gap: 14px !important;

    align-items: center !important;

    width: 100%;

    box-sizing: border-box;
}


/* ============================================================
   WINDSACK
   ============================================================ */

.mfc-wind-overlay__icon {
    width: 100px !important;
    height: 74px !important;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: visible;
}


.mfc-wind-overlay__svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* ============================================================
   WINDWERTE
   ============================================================ */

.mfc-wind-overlay__values {
    min-width: 0 !important;

    text-align: left;
}


/* Windrichtung */

.mfc-wind-overlay__dir {
    margin: 0 0 2px 0;

    font-size: 15px;
    line-height: 1.15;

    font-weight: 600;

    color:
        rgba(255, 255, 255, 0.94);

    white-space: nowrap !important;
}


/* Windgeschwindigkeit */

.mfc-wind-overlay__speed {
    margin: 0 0 3px 0;

    font-size: 24px;
    line-height: 1;

    font-weight: 700;

    color: #ffffff;

    white-space: nowrap !important;
}


/* Böen */

.mfc-wind-overlay__gust {
    margin: 0;

    font-size: 13px;
    line-height: 1.2;

    font-weight: 400;

    color:
        rgba(255, 255, 255, 0.90);

    white-space: nowrap !important;
}


/* ============================================================
   ALTER KAMERAPFEIL
   ============================================================
 *
 * Falls noch irgendwo ein Element aus einer älteren
 * JS-Version vorhanden ist, wird es ausgeblendet.
 *
 * ============================================================ */

.mfc-camera-wind-direction {
    display: none !important;
}


/* ============================================================
   WINDPROGNOSE - UHRZEIT / QUELLE
   ============================================================ */

.mfc-wind-overlay__meta {
    margin-top: 8px;

    padding-top: 6px;

    border-top:
        1px solid rgba(255, 255, 255, 0.13);

    font-size: 10px;
    line-height: 1.2;

    color:
        rgba(255, 255, 255, 0.68);

    text-align: right;

    white-space: nowrap;
}


/* ============================================================
   HINWEIS ZUM VOLLBILD
   ============================================================ */

.mfc-webcam-zoom-hint {
    position: absolute !important;

    /*
     * Unterhalb der Webcam links.
     */
    top: calc(100% + 14px) !important;
    left: 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    padding:
        6px 10px !important;

    border-radius:
        6px !important;

    background:
        rgba(240, 244, 248, 0.95) !important;

    border:
        1px solid rgba(0, 0, 0, 0.08) !important;

    color:
        #52606d !important;

    font-size:
        12px !important;

    line-height:
        1.2 !important;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.08) !important;

    pointer-events:
        none !important;

    z-index:
        80 !important;

    box-sizing:
        border-box !important;
}


.mfc-webcam-zoom-hint__icon {
    font-size:
        17px !important;

    line-height:
        1 !important;

    color:
        #337ab7 !important;
}


/* ============================================================
   ZEITRAFFER / AKTUELLES BILD
   ============================================================ */

.webcam-switch {
    width: 134% !important;
    max-width: none !important;

    margin-top:
        20px !important;

    margin-right:
        0 !important;

    margin-bottom:
        30px !important;

    margin-left:
        0 !important;

    text-align:
        center !important;

    font-size:
        28px !important;

    line-height:
        1.3 !important;

    font-weight:
        500 !important;

    box-sizing:
        border-box !important;
}


.webcam-switch a {
    text-decoration:
        none !important;
}


/* ============================================================
   WEBCAM ANKLICKBAR
   ============================================================ */

#ais_94.mfc-webcam-clickable,
#ais_95.mfc-webcam-clickable {
    cursor: zoom-in;
}


/* ============================================================
   WEBCAM VOLLBILD
   ============================================================ */

.mfc-webcam-fullscreen {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.96);

    z-index: 999999;

    box-sizing: border-box;

    cursor: zoom-out;
}


/* Webcam-Bild im Vollbild */

.mfc-webcam-fullscreen__image {
    display:
        block !important;

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        100vw !important;

    max-height:
        100vh !important;

    object-fit:
        contain !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* ============================================================
   VOLLBILD - SCHLIESSEN
   ============================================================ */

.mfc-webcam-fullscreen__close {
    position: fixed;

    top: 18px;
    right: 22px;

    width: 46px;
    height: 46px;

    padding: 0;

    border:
        1px solid rgba(255, 255, 255, 0.40);

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, 0.55);

    color:
        #ffffff;

    font-size:
        34px;

    line-height:
        40px;

    text-align:
        center;

    cursor:
        pointer;

    z-index:
        1000000;
}


.mfc-webcam-fullscreen__close:hover {
    background:
        rgba(255, 255, 255, 0.18);
}


/* ============================================================
   VOLLBILD - HINWEIS
   ============================================================ */

.mfc-webcam-fullscreen__hint {
    position: fixed;

    bottom: 18px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        6px 12px;

    border-radius:
        6px;

    background:
        rgba(0, 0, 0, 0.55);

    color:
        rgba(255, 255, 255, 0.80);

    font-size:
        12px;

    white-space:
        nowrap;
}


/* Hintergrundseite während Vollbild nicht scrollen */

body.mfc-webcam-fullscreen-open {
    overflow:
        hidden !important;
}


/* ============================================================
   TABLET / KLEINERE DESKTOPS
   ============================================================ */

@media (max-width: 979px) {

    /* --------------------------------------------------------
       Header
       -------------------------------------------------------- */

    .header .brand {
        gap:
            12px !important;
    }


    .header .brand img {
        width:
            90px !important;

        max-width:
            90px !important;

        flex:
            0 0 90px !important;
    }


    .header .brand::after {
        font-size:
            28px;

        white-space:
            normal;
    }


    /* --------------------------------------------------------
       Webcam
       -------------------------------------------------------- */

    #ais_94_wrapper,
    #ais_95_wrapper {
        width:
            100% !important;

        max-width:
            100% !important;

        margin-bottom:
            125px !important;
    }


    .webcam-switch {
        width:
            100% !important;

        max-width:
            100% !important;
    }


    /* --------------------------------------------------------
       Windprognose
       -------------------------------------------------------- */

    .mfc-wind-overlay {
        top:
            calc(100% + 9px) !important;

        right:
            0 !important;

        width:
            270px !important;

        padding:
            9px 11px;
    }


    .mfc-wind-overlay__content {
        grid-template-columns:
            90px 1fr !important;

        column-gap:
            10px !important;
    }


    .mfc-wind-overlay__icon {
        width:
            90px !important;

        height:
            68px !important;
    }


    .mfc-wind-overlay__dir {
        font-size:
            14px;
    }


    .mfc-wind-overlay__speed {
        font-size:
            21px;
    }


    .mfc-wind-overlay__gust {
        font-size:
            12px;
    }
}


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

@media (max-width: 600px) {

    /* --------------------------------------------------------
       Header
       -------------------------------------------------------- */

    .header .brand {
        gap:
            10px !important;

        align-items:
            center !important;
    }


    .header .brand img {
        width:
            70px !important;

        max-width:
            70px !important;

        flex:
            0 0 70px !important;
    }


    .header .brand::after {
        font-size:
            21px;

        line-height:
            1.1;

        white-space:
            normal;
    }


    /* --------------------------------------------------------
       Webcam
       -------------------------------------------------------- */

    #ais_94_wrapper,
    #ais_95_wrapper {
        margin-top:
            15px !important;

        /*
         * Unter der Kamera:
         * Zoom-Hinweis + Wetterbox
         */
        margin-bottom:
            175px !important;
    }


    /* --------------------------------------------------------
       Zoom-Hinweis
       -------------------------------------------------------- */

    .mfc-webcam-zoom-hint {
        top:
            calc(100% + 8px) !important;

        padding:
            5px 7px !important;

        font-size:
            10px !important;
    }


    .mfc-webcam-zoom-hint__icon {
        font-size:
            14px !important;
    }


    /* --------------------------------------------------------
       Windprognose
       -------------------------------------------------------- */

    .mfc-wind-overlay {
        /*
         * Unter dem Zoom-Hinweis.
         */
        top:
            calc(100% + 42px) !important;

        left:
            0 !important;

        right:
            0 !important;

        width:
            100% !important;

        padding:
            8px 10px;

        border-radius:
            8px;
    }


    .mfc-wind-overlay__title {
        margin-bottom:
            5px;

        padding-bottom:
            4px;

        font-size:
            10px;
    }


    .mfc-wind-overlay__content {
        grid-template-columns:
            70px 1fr !important;

        column-gap:
            8px !important;
    }


    .mfc-wind-overlay__icon {
        width:
            70px !important;

        height:
            56px !important;
    }


    .mfc-wind-overlay__dir {
        font-size:
            12px;
    }


    .mfc-wind-overlay__speed {
        font-size:
            18px;
    }


    .mfc-wind-overlay__gust {
        font-size:
            11px;
    }


    .mfc-wind-overlay__meta {
        margin-top:
            5px;

        padding-top:
            4px;

        font-size:
            9px;
    }


    /* --------------------------------------------------------
       Zeitraffer-Link
       -------------------------------------------------------- */

    .webcam-switch {
        width:
            100% !important;

        margin-top:
            18px !important;

        margin-bottom:
            22px !important;

        font-size:
            22px !important;
    }


    /* --------------------------------------------------------
       Vollbild
       -------------------------------------------------------- */

    .mfc-webcam-fullscreen {
        padding:
            0;
    }


    .mfc-webcam-fullscreen__close {
        top:
            10px;

        right:
            10px;

        width:
            42px;

        height:
            42px;

        font-size:
            30px;

        line-height:
            36px;
    }


    .mfc-webcam-fullscreen__hint {
        bottom:
            10px;

        font-size:
            10px;
    }
}