/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/


/* metropolis-latin-300-light */
@font-face {
  font-family: 'Metropolis';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-300-normal.woff2) format('woff2'),
       url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-300-normal.woff) format('woff');
}

/* metropolis-latin-300-light-italic */
@font-face {
  font-family: 'Metropolis';
  font-style: italic;
  font-display: swap;
  font-weight: 300;
src: url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-300-italic.woff2) format('woff2'),
       url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-300-italic.woff) format('woff');
}


/* metropolis-latin-400-normal */
@font-face {
  font-family: 'Metropolis';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
src: url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-400-normal.woff2) format('woff2'),
       url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-400-normal.woff) format('woff');
}


/* metropolis-latin-400-italic */
@font-face {
  font-family: 'Metropolis';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
src: url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-400-italic.woff2) format('woff2'),
       url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-400-italic.woff) format('woff');
}


/* metropolis-latin-700-bold */
@font-face {
  font-family: 'Metropolis';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
src: url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-700-normal.woff2) format('woff2'),
       url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-700-normal.woff) format('woff');
}

/* metropolis-latin-900-black */
@font-face {
  font-family: 'Metropolis';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
src: url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-900-normal.woff2) format('woff2'),
       url(https://team.kleinhempel-group.de/wp-content/themes/betheme-child/fonts/metropolis-latin-900-normal.woff) format('woff');
}




/*
*
*** Animiertes Logo
*
*/

.logo {
   text-align: left !important;
}


.logo a {
    display: inline-block;
}


.logo-container {
        padding: 20px 0;
        display: inline-block;
        vertical-align: middle;
    
     }
         .logo-container svg {
            height: 40px;
        }
        
         .logo-container svg {
            cursor: pointer;
        }
                    
        /* Grundzustand der Rauten (zusammengeschoben) */
        .raute-wrapper {
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateX(0);
        }
                
        .logo-container .raute-container {
             transform: translateX(0);
            transition: 0.6s;
        }
        
        /* Die restliche Logik für .raute-container analog */
        .logo-container svg:hover .raute-container,
        .logo-container.is-loading svg .raute-container { 
            transform: translateX(+8.4%); 
        }

        /* Hover- UND Active-Zustand: Zielpositionen */
        .logo-container svg:hover .raute-wrapper.delay-1, .logo-container.is-loading .raute-wrapper.delay-1 { transform: translateX(-8.4%); }
        .logo-container svg:hover .raute-wrapper.delay-2, .logo-container.is-loading .raute-wrapper.delay-2 { transform: translateX(-2.4%); }
        .logo-container svg:hover .raute-wrapper.delay-3, .logo-container.is-loading .raute-wrapper.delay-3 { transform: translateX(3.6%); }
        .logo-container svg:hover .raute-wrapper.delay-4, .logo-container.is-loading .raute-wrapper.delay-4 { transform: translateX(9.5%); }
        
        /* Individuelle Verzögerungen für den Fächer-Effekt */
        /* Beim Mouse-Over (Reinlaufen) */
        .logo-container:hover .delay-1, .logo-container.is-loading .delay-1 { transition-delay: 0.0s; }
        .logo-container:hover .delay-2, .logo-container.is-loading .delay-2 { transition-delay: 0.05s; }
        .logo-container:hover .delay-3, .logo-container.is-loading .delay-3 { transition-delay: 0.1s; }
        .logo-container:hover .delay-4, .logo-container.is-loading .delay-4 { transition-delay: 0.15s; }

        /* Beim Mouse-Out (Rückzug) - optional: andere Delays für das Schließen */
        .delay-1 { transition-delay: 0.0s; }
        .delay-2 { transition-delay: 0.1s; }
        .delay-3 { transition-delay: 0.05s; }
        .delay-4 { transition-delay: 0.0s; }

        .logo-container svg {
            display: block;
        }

        /* Styles aus deinem Original */
        .cls-1 { fill: #0479FE; }
        .cls-2 { fill: #C9E2FF; }
        .cls-3 { fill: #05123F; }
        

        @media only screen and (min-width: 768px) {
    #Top_bar.is-sticky .logo-container svg, #Top_bar.is-sticky .logo-container svg{
        height: 30px!important;
        line-height: 50px!important;
    }

     #Top_bar.is-sticky .logo-container, #Top_bar.is-sticky .logo-container {
        padding: 15px 0!important;
        
    }
}

        @media only screen and (max-width: 767px) {
#Top_bar .logo-container svg, #Top_bar .logo-container svg{
        height: 30px!important;
        line-height: 50px!important;
    }

     #Top_bar .logo-container, #Top_bar .logo-container {
        padding: 15px 0 15px 23px!important;
        
    }

 }