/* =========================================================================
   Kaffee Einstein – lokale Offline-Rekonstruktion
   responsive.css – Medienabfragen

   Breakpoints des Originals:
     max-width: 1024px  → Elementor "Tablet"
     max-width:  959px  → OceanWP (Container auf 90 %)
     max-width:  767px  → Elementor "Mobile" (Spalten brechen um)
     max-width:  480px  → OceanWP (kleinere "Nach oben"-Schaltfläche)
   ========================================================================= */

/* -------------------------------------------------------------------------
   ≤ 1024 px – Tablet
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    .buehne > .container {
        min-height: 500px;
    }

    .begruessung {
        padding: 50px 0;
    }

    .standort__spalte-info > .spalte__inhalt {
        padding: 20px;
    }

    .standort__titel {
        font-size: 24px;
    }

    .standort__liste .icon-liste__eintrag,
    .standort__liste .icon-liste__eintrag a {
        font-size: 18px;
    }

    /* Galerie: Original-Einstellung "columns_tablet: 4", "gap_tablet: 10" */
    .galerie {
        --columns: 4;
        --hgap: 10px;
        --vgap: 10px;
    }
}

/* -------------------------------------------------------------------------
   1024 px ≥ Breite ≥ 768 px – halbierte Spalten
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 768px) {

    .standort__spalte-info,
    .standort__spalte-karte {
        width: 50%;
    }

    .angebot__spalte {
        width: 50%;
    }

    .angebot .zeile {
        flex-wrap: wrap;
    }
}

/* -------------------------------------------------------------------------
   ≤ 959 px – Container auf 90 % (OceanWP)
   ------------------------------------------------------------------------- */
@media (max-width: 959px) {

    .container,
    .container--800,
    .container--1000 {
        max-width: 90%;
    }
}

/* -------------------------------------------------------------------------
   ≤ 767 px – Smartphone: Spalten untereinander
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .zeile {
        flex-wrap: wrap;
    }

    .spalte,
    .spalte--25,
    .spalte--50,
    .standort__spalte-info,
    .standort__spalte-karte,
    .farbband__spalte,
    .angebot__spalte,
    .seiten-fuss__spalte {
        width: 100%;
    }

    /* Kopfbereich: 80 % / 20 %, vertikal zentriert */
    .seiten-kopf__spalte-logo {
        width: 80%;
        align-items: center;
    }

    .seiten-kopf__spalte-logo > .spalte__inhalt {
        align-content: center;
        align-items: center;
    }

    .seiten-kopf__spalte-leer {
        width: 20%;
        align-items: center;
    }

    .seiten-kopf__titel {
        font-size: 26px;
    }

    .buehne > .container {
        min-height: 500px;
    }

    .standort__spalte-info > .spalte__inhalt {
        padding: 60px 20px;
    }

    .galerie-bereich {
        padding: 0 0 50px 0;
    }

    /* Galerie: Original-Einstellung "columns_mobile: 2", "gap_mobile: 10" */
    .galerie {
        --columns: 2;
        --hgap: 10px;
        --vgap: 10px;
    }

    .lightbox__buehne {
        padding: 60px 15px;
    }

    .lightbox__zurueck { left: 5px; }
    .lightbox__vor { right: 5px; }
}

/* -------------------------------------------------------------------------
   ≤ 480 px – kleinere „Nach oben“-Schaltfläche (OceanWP)
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

    .nach-oben {
        right: 10px;
        bottom: 10px;
        width: 26px;
        height: 26px;
        font-size: 14px;
        line-height: 24px;
    }
}