/* ==========================================================================
   RESPONSIVE.CSS
   Kardinal-Galen-Schule

   Geräte:
   - iPhone Hochformat
   - iPhone Querformat
   - iPad Hochformat
   - iPad Querformat

   Ergänzt die bestehende customstyles.css
   ========================================================================== */


/* ==========================================================================
   ALLGEMEINE RESPONSIVE FIXES
   ========================================================================== */

img,
.ce-gallery img,
.ce-image img,
.news-img-wrap img,
figure img,
.image-embed-item {
    max-width: 100%;
    height: auto !important;
}

iframe,
video {
    max-width: 100%;
}

.card-modern,
.card,
.box {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.hero__images img {
    width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================================
   IPHONE HOCHFORMAT
   ========================================================================== */

@media screen and (max-width: 767px) {

    body {
        font-size: 16px;
        line-height: 1.6;
    }

    h1 { font-size: 24px !important; }
    h2 { font-size: 22px !important; }
    h3 { font-size: 20px !important; }
    h4 { font-size: 18px !important; }
    h5 { font-size: 16px !important; }

    .navbar {
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 6px 10px !important;
    }

    .navbar-brand img,
    .navbar img {
        max-height: 45px !important;
    }

    .navbar-nav .nav-link {
        font-size: 14px !important;
        padding: 6px 0 !important;
        white-space: normal !important;
    }

    .hero__images {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cardinal-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }

    .cardinal-header .header-logo {
        height: 50px !important;
    }

    .cardinal-header h5 {
        font-size: 1.2rem !important;
    }

    .kgs-accordion-title {
        font-size: 14px !important;
    }

    .kgs-accordion-content {
        font-size: 14px !important;
        padding: 12px !important;
    }

    .news-img-wrap {
        float: none !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .news-img-wrap img {
        width: 100% !important;
    }

    figure.image figcaption {
        font-size: 11px !important;
        line-height: 1.2 !important;
        padding: 4px 6px !important;
    }

    .footercontent .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        margin-bottom: 10px !important;
    }

    .footergeo a {
        display: block !important;
        margin: 5px 0 !important;
    }

    .scroll-to-top,
    #scrollToTop {
        right: 15px !important;
        bottom: 15px !important;
    }
}


/* ==========================================================================
   IPHONE QUERFORMAT
   ========================================================================== */

@media screen and (max-width: 932px) and (orientation: landscape) {

    .navbar-brand img,
    .navbar img {
        max-height: 40px !important;
    }

    .navbar-nav .nav-link {
        font-size: 13px !important;
    }

    .hero__images {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .cardinal-header .header-logo {
        height: 45px !important;
    }

    figure.image figcaption {
        font-size: 10px !important;
    }
}


/* ==========================================================================
   IPAD HOCHFORMAT
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .navbar-brand img,
    .navbar img {
        max-height: 55px !important;
    }

    .navbar-nav .nav-link {
        font-size: 14px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .cardinal-header .header-logo {
        height: 60px !important;
    }

    .cardinal-header h5 {
        font-size: 1.5rem !important;
    }

    .hero__images {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    figure.image figcaption {
        font-size: 12px !important;
    }

    .kgs-accordion-title {
        font-size: 15px !important;
    }
}


/* ==========================================================================
   IPAD QUERFORMAT
   ========================================================================== */

@media screen and (min-width: 1024px) and (max-width: 1366px) {

    .navbar-brand img,
    .navbar img {
        max-height: 60px !important;
    }

    .navbar-nav .nav-link {
        font-size: 15px !important;
    }

    .cardinal-header .header-logo {
        height: 65px !important;
    }

    .hero__images {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    figure.image figcaption {
        font-size: 13px !important;
    }
}


/* ==========================================================================
   TABELLEN AUF MOBILGERÄTEN
   ========================================================================== */

@media screen and (max-width: 1024px) {

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* ==========================================================================
   TYPO3 BILDGALERIEN
   ========================================================================== */

@media screen and (max-width: 1024px) {

    .ce-column,
    [data-ce-columns="2"] .ce-column,
    [data-ce-columns="3"] .ce-column,
    [data-ce-columns="4"] .ce-column,
    [data-ce-columns="5"] .ce-column,
    [data-ce-columns="6"] .ce-column {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }
}


/* ==========================================================================
   FOOTER OPTIMIERUNGEN
   ========================================================================== */

@media screen and (max-width: 767px) {

    .footercontent {
        padding: 10px !important;
    }

    .footercontent strong {
        display
    }
}