/*
 Theme Name:     Divi Child-Theme
 Theme URI:      http://www.elegantthemes.com
 Description:    Divi Child-Theme
 Author:         Divi.world
 Author URI:     https://divi.world
 Template:       Divi
 Version:        1.0.0
*/


/* =========================================================
   GRUNDEINSTELLUNGEN
   ========================================================= */

* {
    box-sizing: border-box;
}


/* =========================================================
   SCHRIFTEN
   ========================================================= */

@font-face {
    font-family: "Dauphin";
    src:
        url("fonts/Dauphin.woff2") format("woff2"),
        url("fonts/Dauphin.woff") format("woff"),
        url("fonts/Dauphin.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "MyriadPro";
    src:
        url("fonts/MyriadPro-Regular.woff2") format("woff2"),
        url("fonts/MyriadPro-Regular.woff") format("woff");
    font-display: swap;
}


/* =========================================================
   ALLGEMEINE TYPOGRAFIE
   ========================================================= */

h1,
h2,
h3 {
    color: #a7d32a;
    font-family: "Dauphin", "Open Sans", sans-serif;
    letter-spacing: 0.1rem;
    font-weight: bold;
    text-shadow:
        -1px -1px 1px rgba(255, 255, 255, 0.1),
        1px 1px 1px rgba(0, 0, 0, 0.5);

    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    word-break: break-word;
}

p,
a,
h4 {
    font-family: "MyriadPro", sans-serif;
}

a {
    color: #567500;
}


/* =========================================================
   DIVI GRUNDEINSTELLUNGEN
   ========================================================= */
.form-submit .et_pb_button {
    color: #567500;
}

#page-container {
    font-family:
        "MyriadPro",
        "Lucida Sans",
        "Lucida Sans Regular",
        "Lucida Grande",
        "Lucida Sans Unicode",
        Geneva,
        Verdana,
        sans-serif;
}


/* =========================================================
   DESKTOP MENÜ
   ========================================================= */

/*
 * Ab 981px wird das normale Divi-Desktop-Menü verwendet.
 * Die Menüpunkte werden explizit horizontal angeordnet.
 */

@media screen and (min-width: 981px) {

    .et_pb_menu .et_pb_menu__menu,
    .et_pb_fullwidth_menu .et_pb_menu__menu {
        display: flex !important;
        align-items: center;
    }

    .et_pb_menu .et_pb_menu__menu > nav,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav {
        display: flex;
        width: auto;
    }

    .et_pb_menu .et_pb_menu__menu > nav > ul,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: auto !important;
    }

    .et_pb_menu .et_pb_menu__menu > nav > ul > li,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li {
        display: flex !important;
        flex-direction: row;
        width: auto !important;
        flex: 0 0 auto;
    }

    /*
     * Falls einem Menü-Modul die Klasse
     * "pg-hide-mobile-menu" zugewiesen wurde.
     */
    .pg-hide-mobile-menu.et_pb_menu .et_pb_menu__menu,
    .pg-hide-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu {
        display: flex !important;
    }

    .pg-hide-mobile-menu .et_mobile_nav_menu {
        display: none !important;
    }
}


/* =========================================================
   SUBMENÜ DES HAUPTMENÜS
   ========================================================= */

#menu-hauptmenue-kurz .sub-menu {
    background-image: url("../../uploads/Rinde_Apfelb-scaled.jpg") !important;
    background-color: #ffffff;

    z-index: 10000 !important;

    background-repeat: no-repeat;
    background-size: cover !important;
    background-attachment: fixed !important;
}


/* =========================================================
   MOBILES MENÜ
   ========================================================= */

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

    /*
     * Divi Desktop-Menü auf kleinen Bildschirmen ausblenden.
     */
    .et_pb_menu .et_pb_menu__menu,
    .et_pb_fullwidth_menu .et_pb_menu__menu {
        display: none;
    }

    /*
     * Mobiles Divi-Menü anzeigen.
     */
    .et_pb_menu .et_mobile_nav_menu,
    .et_pb_fullwidth_menu .et_mobile_nav_menu {
        display: flex;
    }

    /*
     * Untermenü-Pfeil
     */
    .et_mobile_nav_menu .menu-item-has-children > a::after {
        content: "\f107";
        font-family: "FontAwesome";
        font-size: 16px;
        margin-left: 5px;
        display: inline-block;
        vertical-align: middle;
    }

    /*
     * Untermenüs zunächst ausblenden
     */
    .et_mobile_nav_menu .menu-item-has-children .sub-menu {
        display: none;
        padding-left: 20px;
    }

    /*
     * Geöffnetes Untermenü anzeigen
     */
    .et_mobile_nav_menu .menu-item-has-children.open .sub-menu {
        display: block;
    }
}


/* Mobiles Menü */

.et_mobile_nav_menu .mobile_nav #mobile_menu2 {
    background-image: url("../../uploads/Rinde_Apfelb-scaled.jpg") !important;

    position: fixed;
    right: 0 !important;
    left: auto;

    width: 75%;
    max-height: 80vh;

    background-color: #ffffff;

    z-index: 10000 !important;

    background-repeat: no-repeat;
    background-size: cover !important;
    background-attachment: fixed !important;

    overflow-y: auto;
}


/* Mobiler Menü-Button */

.et_mobile_nav_menu .mobile_menu_bar {
    z-index: 10001 !important;

    position: fixed;
    top: 10px;
    right: 10px;
}


/* Menü wird angezeigt, wenn es geöffnet ist */

.mobile_menu_opened #mobile_menu {
    display: block;
}

.et_pb_menu .et_mobile_menu {
    top: 60px;
}


/* =========================================================
   HINTERGRUNDBILDER / JAHRESZEITEN
   ========================================================= */

.fruehling {
    background-image: url("images/apfelschlange_fruehling.jpg");
}

.sommer {
    background-image: url("../../uploads/Apfelschlange_Sommer.jpg");
}

.holler-schwarz {
    background-image: url("images/apfelschlange_holler_schwarz.jpg");
}

.herbst {
    background-image: url("images/apfelschlange_herbst.jpg");
}

.winter {
    background-image: url("images/apfelschlange_winter.jpg");
}


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

footer {
    position: relative !important;
    z-index: 9 !important;

    box-shadow:
        #d5eaa8 0 -1px 4px,
        #d5eaa8 0 -2px 10px,
        #d5eaa8 0 -10px 20px,
        #d5eaa8 0 -18px 40px,
        5px 5px 15px 5px #d5eaa8;
}


/* =========================================================
   REZEPTE
   ========================================================= */

.rezept .rezept__img {
    margin-right: 20px;

    display: grid;

    height: 100%;

    grid-template-columns: auto auto;
    grid-template-rows: auto auto;

    gap: 10px;
}

.rezept__img1 {
    grid-area: 1 / 1 / 2 / 3;
}

.rezept__img2 {
    grid-area: 2 / 1 / 5 / 2;
}

.rezept__img3 {
    grid-area: 2 / 2 / 5 / 3;
}

.rezept .rezept__img img {
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   PRODUKTE
   ========================================================= */

.produkte__link {
    display: flex;
    flex-direction: column;

    align-items: stretch;
    align-content: stretch;

    margin: 0 0.5rem 1.5rem;

    text-align: center;

    border: 0.5px solid white;
    border-radius: 10px;

    overflow: hidden;
    position: relative;

    box-shadow: 2px 2px 4px #adadad;

    flex-basis: calc(50% - 1rem);

    line-height: 0;
}

.produkte__text {
    color: black;

    text-shadow: 2px 2px 4px #ffffff;

    margin: 0;
    padding: 0.5rem;

    background-color: rgba(255, 255, 255, 0.3);

    border-radius: 10px;

    width: 100%;
}


/* =========================================================
   ARTIKEL SLIDER
   ========================================================= */

.artikel__slider .et_pb_column {
    display: flex;
    width: 100% !important;
}

.artikel__slider .et_pb_row {
    display: flex;
    flex-direction: column;
}

.artikel__slider .et_pb_image .gross {
    width: auto;
    height: 20vh !important;
    margin: 0 auto !important;
}

.artikel__slider .et_pb_image .mittel {
    width: auto;
    height: 17vh !important;
    margin: 0 auto !important;
}

.artikel__slider .et_pb_image .klein {
    width: auto;
    height: 15vh !important;
    margin: 0 auto !important;
}

.artikel__slider .et_pb_image img {
    width: auto;
    height: 100% !important;
    max-width: none;
}

.artikel__slider .et_pb_image span {
    width: auto;
    height: 100% !important;
}


/* =========================================================
   LISTEN
   ========================================================= */

#et_pb_text ul {
    list-style-image: url("../../uploads/apfel.png") !important;
}


/* =========================================================
   FLEX-HILFSKLASSEN
   ========================================================= */

.flexreihe {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    align-items: baseline;
    justify-content: flex-start;
    align-content: center;

    width: 100% !important;

    margin: 0 !important;

    column-gap: 20px;
}

.flexspalte {
    display: flex;
    flex-direction: column;
}


/* =========================================================
   SCROLL-EFFEKT
   ========================================================= */

.scroll-image {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}