/* ============================================================
 *  JonenLab Homepage
 *  Kalender links / Bookmarks rechts
 *  ============================================================ */

@media (min-width: 1024px) {

    /* ========================================================
     *      GRUNDLAYOUT
     *      ======================================================== */

    #layout-groups {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0.75rem !important;
    align-items: start !important;
    }

    /* Normale Service-Gruppen über volle Breite */
    #layout-groups > .services-group {
    grid-column: 1 / -1;
    }


    /* ========================================================
     *      KALENDER LINKS
     *      ======================================================== */

    #layout-groups > .services-group:has(
    .service[data-name="Outlook Kalender"]
    ) {
        grid-column: 1 !important;
        grid-row: 5 / span 4 !important;

        width: 100% !important;
        min-width: 0 !important;

        padding-right: 0.4rem !important;
    }


    /* Kalenderkarte */
    .service[data-name="Outlook Kalender"] .service-card {
        padding: 0.4rem !important;
    }


    /* Kalendertitel */
    .service[data-name="Outlook Kalender"] .service-name {
        font-size: 1rem !important;
        font-weight: 500 !important;

        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }


    /* Outlook Icon */
    .service[data-name="Outlook Kalender"] .service-icon {
        width: 3.5rem !important;
        min-width: 3.5rem !important;
    }

    .service[data-name="Outlook Kalender"] .service-icon img {
        width: 34px !important;
        height: 34px !important;
    }


    /* ========================================================
     *      BOOKMARKS RECHTS
     *      ======================================================== */

    /* Favoriten */
    #layout-groups > .bookmark-group:has(
    .bookmark[data-name="Outlook"]
    ) {
        grid-column: 2 !important;
        grid-row: 5 !important;
    }


    /* News */
    #layout-groups > .bookmark-group:has(
    .bookmark[data-name="SRF"]
    ) {
        grid-column: 2 !important;
        grid-row: 6 !important;
    }


    /* Shopping */
    #layout-groups > .bookmark-group:has(
    .bookmark[data-name="Galaxus"]
    ) {
        grid-column: 2 !important;
        grid-row: 7 !important;
    }


    /* Entertainment */
    #layout-groups > .bookmark-group:has(
    .bookmark[data-name="YouTube"]
    ) {
        grid-column: 2 !important;
        grid-row: 8 !important;
    }


    #layout-groups > .bookmark-group {
    width: 100% !important;
    min-width: 0 !important;

    padding-left: 0.4rem !important;
    padding-right: 0 !important;
    padding-bottom: 0.35rem !important;
    }


    /* ========================================================
     *      BOOKMARK-GRUPPEN
     *      ======================================================== */

    #layout-groups > .bookmark-group .bookmark-group-name {
    font-size: 1rem !important;
    font-weight: 500 !important;
    }


    #layout-groups > .bookmark-group ul {
    margin-top: 0.4rem !important;
    margin-bottom: 0.3rem !important;

    gap: 0.5rem !important;
    }


    /* ========================================================
     *      BOOKMARK-KACHELN
     *      ======================================================== */

    #layout-groups > .bookmark-group .bookmark > a {
    min-height: 2.6rem !important;

    display: flex !important;
    align-items: center !important;
    }


    /* Icon-Bereich */
    #layout-groups > .bookmark-group .bookmark-icon {
    width: 2.8rem !important;
    min-width: 2.8rem !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    }


    /* Icons */
    #layout-groups > .bookmark-group .bookmark-icon img,
    #layout-groups > .bookmark-group .bookmark-icon svg {
    width: 1.4rem !important;
    height: 1.4rem !important;
    }


    /* Bookmark-Name */
    #layout-groups > .bookmark-group .bookmark-name {
    font-size: 0.82rem !important;
    }


    /* URL */
    #layout-groups > .bookmark-group .bookmark-description {
    font-size: 0.68rem !important;
    }
}


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

@media (max-width: 1023px) {

    /*
     * Homepage auf Mobile das native Layout überlassen.
     * Keine eigenen display/flex-Regeln für #layout-groups.
     */

    /* Kalender-Gruppe darf niemals breiter als der Viewport werden */
    #layout-groups > .services-group:has(
    .service[data-name="Outlook Kalender"]
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Service selbst */
    .service[data-name="Outlook Kalender"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Kalenderkarte */
    .service[data-name="Outlook Kalender"] .service-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Widget-Container */
    .service[data-name="Outlook Kalender"] .service-container {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 510px !important;
        min-height: 510px !important;

        overflow: hidden !important;
    }

    /* Homepage-interner iframe Wrapper */
    .service[data-name="Outlook Kalender"] .service-container > div {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 510px !important;
        min-height: 510px !important;

        overflow: hidden !important;
    }

    /* iframe */
    .service[data-name="Outlook Kalender"] iframe {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 510px !important;
        min-height: 510px !important;

        border: 0 !important;
    }
}

/* ============================================================
 *  OUTLOOK KALENDER IFRAME
 *  ============================================================ */

/* Widget-Container darf volle Höhe verwenden */
.service[data-name="Outlook Kalender"] .service-container {
    height: 510px !important;
    min-height: 510px !important;
    overflow: hidden !important;
}

/* interne Wrapper ebenfalls */
.service[data-name="Outlook Kalender"] .service-container > div {
    height: 100% !important;
    width: 100% !important;
}

/* iframe selbst */
.service[data-name="Outlook Kalender"] iframe {
    display: block !important;
    width: 100% !important;
    height: 510px !important;
    min-height: 510px !important;
    border: 0 !important;
}