/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 5.0.0-public-beta.1.2.1762509610
Updated: 2025-11-07 11:00:10

*/

/* ---------------------------------
   Globale Variablen
---------------------------------- */
:root {
	--accent-menu-section-bg: #f4f1ec;
    --accent-menu-bg: #D2F050;
    --accent-menu-hover: #286464;
    --accent-text-color: #000;
    --accent-text-hover: #fff;
}

/* ---------------------------------
   Header Verhalten beim Scrollen
---------------------------------- */
#main-content {
    padding-top: 0 !important;
}

#global-header-section {
    transition: all 0.5s ease !important;
}

#global-header-section.background-white {
    background-color: var(--accent-menu-section-bg) !important;
}

.hide-header {
    opacity: 0;
    margin-top: -148px !important;
}

.show-header {
    opacity: 1;
    margin-top: 0 !important;
}

/* ---------------------------------
   Desktop Menü (ab 1341px)
---------------------------------- */
@media (min-width: 1341px) {

    /* Basis-Menülinks als Pills */
    #top-menu .menu-item > a,
    .et_menu_container .et-menu > li > a,
    .et_header_style_left .et-menu > li > a,
    .et_header_style_split .et-menu > li > a {
        display: inline-block;
        padding: 8px 18px;
        margin: 0 6px;
        border-radius: 9999px;
        text-decoration: none;
        line-height: 1;
        background: var(--accent-menu-bg);
        color: var(--accent-text-color);
        transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease;
        box-shadow: none;
    }

    /* Hover / Fokus */
    #top-menu .menu-item > a:hover,
    #top-menu .menu-item > a:focus,
    .et_menu_container .et-menu > li > a:hover,
    .et_menu_container .et-menu > li > a:focus {
        background: var(--accent-menu-hover);
        color: var(--accent-text-hover);
        transform: translateY(-1px);
        outline: none;
        opacity: 1;
    }

    /* Aktives Menü-Item */
    #top-menu .current-menu-item > a,
    .et_menu_container .et-menu > li.current-menu-item > a,
	#top-menu li.current-menu-ancestor > a, #top-menu li.current-menu-item > a, .mobile_menu_bar::after, .mobile_menu_bar::before {
        background: var(--accent-menu-hover);
        color: var(--accent-text-hover);
        opacity: 1;
    }
}

/* ---------------------------------
   Mobile Menü (bis 1340px)
---------------------------------- */
@media (max-width: 1340px) {

    /* Desktop-Menü ausblenden */
    .pa-fullscreen-menu .et_pb_menu__menu {
        display: none;
    }

    .pa-fullscreen-menu .et_mobile_nav_menu {
        display: flex;
        align-items: center;
    }

    /* Fullscreen Menü */
    .pa-fullscreen-menu #mobile_menu1 {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        padding: 10%;
        background: var(--accent-menu-bg);
        z-index: 9999;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease-in-out,
                    opacity 0.3s ease-in-out,
                    visibility 0.3s ease-in-out;
    }

    /* Geöffnet */
    .pa-fullscreen-menu .opened #mobile_menu1 {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    /* Menü-Liste */
    .pa-fullscreen-menu #mobile_menu1 li {
        list-style: none;
        text-align: left;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Hamburger Icon */
    .pa-fullscreen-menu .mobile_menu_bar {
        z-index: 999999;
        background: var(--accent-menu-bg);
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.5s ease-in-out;
    }
	
    .pa-fullscreen-menu.white .mobile_menu_bar {
        background: #fff;
    }

    .pa-fullscreen-menu .opened .mobile_menu_bar {
        background: transparent;
    }

  .pa-fullscreen-menu .opened .mobile_menu_bar::before {
	  content: "\4d";
        color: #000;
        transition: all 0.5s ease-in-out;
    }

    /* Mobile Menüliste */
    .pa-fullscreen-menu .et_mobile_menu {
        border-top: none;
    }

    .pa-fullscreen-menu .et_mobile_menu .menu-item-has-children > a {
        background: transparent;
    }

    .et_mobile_menu li a {
        display: inline-block;
        position: relative;
        padding: 0;
        border-bottom: none;
        text-decoration: none;
        color: var(--accent-text-color);
        transition: opacity 0.25s ease-out;
    }

    .et_mobile_menu li a:hover {
        background: transparent;
        opacity: 1;
    }

    /* Pills Mobile */
    .mobile_nav .menu-item > a,
    .et_mobile_menu li a {
        padding: 8px 14px;
        margin: 6px 6px 6px 0;
        border-radius: 9999px;
        background: var(--accent-menu-bg);
        color: var(--accent-menu-hover) !important;
        transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease;
    }

    .mobile_nav .menu-item > a:hover,
    .et_mobile_menu li a:hover,
    .mobile_nav .menu-item > a:focus,
    .et_mobile_menu li a:focus {
        background: var(--accent-menu-hover);
        color: var(--accent-text-hover) !important;
    }
}

/* ---------------------------------
   Gradient für Header-Loop
---------------------------------- */
.videoloop_header::before {
    background-color: var(--gcid-30o0v17bze) !important;
    position: absolute;
    inset: 0;
}

/* ---------------------------------
   Kategorie-Icons (Instagram, Youtube, TikTok)
---------------------------------- */
.cat-instagram .label,
.cat-youtube .label,
.cat-tiktok .label {
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.cat-instagram .label {
    background-image: url('https://boyo.de/wp-content/uploads/2025/12/label_bg_instagram.svg');
	background-position-y: 140%;
}

.cat-youtube .label {
    background-image: url('https://boyo.de/wp-content/uploads/2025/12/label_bg_youtube.svg');
	background-position-y: 108%;
}

.cat-tiktok .label {
    background-image: url('https://boyo.de/wp-content/uploads/2025/12/label_bg_tiktok.svg');
	background-position-y: 100%;
}

/* ---------------------------------
   Margin-Hack für Single Posts
---------------------------------- */
.hacks .et_pb_post {
	margin-bottom: 0 !important;
}

/* ---------------------------------
   Aspect-Ratio Hack für Teaser-Bilder
---------------------------------- */
.equal-image-row .et_pb_image,
.equal-image-row .et_pb_image img {
    width: 100%;
}

.equal-image-row .et_pb_image img {
    height: 284px;            /* feste Höhe */
    object-fit: cover;        /* Bild wird zugeschnitten */
    object-position: center;  /* immer zentriert */
    display: block;           /* verhindert weiße Lücken */
}