/* ./static/css/indexMainContent.css */

/* Mobile First, hier werden die Elemente für mobile Geräte definiert */
/* 568px - 767px, Mindestweite für die Ansicht ist 568px */

main {
    .main-background {

        .content {
            display: flex;
            flex-direction: column;
            /* justify-content: center; */
            width: 550px;
            margin: 16px auto 0px auto;
            gap: 16px;

            .hero {
                .herobox {
                    width: 550px;
                }
            }

            .navboxen {
                /* GRID */
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                justify-content: start;
                gap: 16px;
                width: 550px;

                .navbox {
                    /* (550-16) / 2 */
                    width: 267px;
                }
            }

            .box {
                width: 550px;

                .box-header {}

                .box-content {
                    display: flex;
                    flex-direction: column;
                    justify-content: start;
                    row-gap: 16px;

                    .newscontainer {
                        /* GRID */
                        display: grid;
                        grid-template-columns: repeat(1, 1fr);
                        justify-content: start;
                        gap: 16px;

                        .newsbox {
                            display: flex;
                            flex-direction: row;
                            border: 1px solid var(--borderColor);
                            border-radius: 8px;

                            .newsbox-header {
                                width: 50%;

                                a {
                                    img {
                                        height: 100%;
                                        width: 100%;
                                        object-fit: cover;
                                        object-position: center;
                                    }
                                }
                            }

                            .newsbox-content {
                                width: 50%;
                                padding: 20px;
                                background: #FFF;

                                .news-date {
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    gap: 7px;
                                    min-height: 12px;
                                    margin: 0 0 8px 0;
                                    color: #555;
                                    font-size: 12px;

                                }
                            }
                        }

                    }

                    .weitere-news {
                        display: flex;
                        flex-direction: column;
                        width: 510px;
                        color: #006599;
                        font-weight: 700;
                        gap: 16px;

                        .news-button-grid {
                            display: grid;
                            justify-content: left;
                            align-items: start;
                            grid-template-columns: repeat(4, 1fr);
                            gap: 12px;

                            .news-button {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                height: 55px;
                                /* (510 - 36) / 4 */
                                width: 118.5px;
                                border-radius: 10px;
                                background: #fff;
                                color: inherit;
                                font-weight: 700;
                                font-size: 13px;
                                text-align: center;
                                text-decoration: none;
                                box-shadow: 0 3px 12px rgba(0, 0, 0, .10);
                                transition: transform 0.2s ease, box-shadow 0.2s ease;
                                will-change: transform;
                                color: black;

                                &::before {
                                    color: var(--hoverBlau);
                                    content: "»";
                                    margin-right: 4px;
                                }

                                &:hover {
                                    color: var(--hoverBlau);
                                    transform: translateY(-5px);
                                    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
                                    text-decoration: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 768px) {

    /* Hier werden die Elemente für Tablets definiert */
    /* 768px - 1239px */

    main {
        .main-background {

            .content {
                display: flex;
                flex-direction: column;
                width: 518px;

                .hero {
                    .herobox {
                        width: 500px;
                    }
                }

                .navboxen {
                    width: 500px;

                    .navbox {
                        /* (500-16) / 2 */
                        width: 242px;
                    }
                }

                .box {
                    width: 500px;

                    .box-header {}

                    .box-content {
                        .newscontainer {
                            /* GRID */
                            grid-template-columns: repeat(1, 1fr);
                        }

                        .weitere-news {
                            width: 458px;
                            color: #006599;
                            font-weight: 700;

                            .news-button-grid {
                                grid-template-columns: repeat(4, 1fr);
                                gap: 12px;

                                .news-button {
                                    /* (458 - 36) / 4 */
                                    width: 107px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 1240px) {

    /* Hier werden die Elemente für Desktop definiert */
    /* Ab 1240px */

    main {
        .main-background {

            .content {
                display: flex;
                flex-direction: column;
                width: 990px;

                .hero {
                    .herobox {
                        width: 970px;
                    }
                }

                .navboxen {
                    grid-template-columns: repeat(4, 1fr);

                    .navbox {
                        /* (970 - (3*16 Gap=48)) / 4 */
                        width: 230.5px;
                    }
                }

                .box {
                    width: 970px;

                    .box-header {}

                    .box-content {
                        .newscontainer {
                            grid-template-columns: repeat(3, 1fr);

                            .newsbox {
                                flex-direction: column;

                                .newsbox-header {
                                    a {
                                        img {
                                            width: 298px;
                                            height: 200px;
                                        }
                                    }
                                }
                            }
                        }

                        .weitere-news {
                            width: 930px;
                            color: #006599;
                            font-weight: 700;

                            .news-button-grid {
                                display: grid;
                                grid-template-columns: repeat(7, 1fr);
                                gap: 12px;

                                .news-button {
                                    /* (930 - 72) / 7 */
                                    width: 122px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}