/*======================================
Theme Name: Kopf und Hand Theme
Theme URI: https://kopf-hand.de
Description: Ein individuell erstelltes Theme von Kopf & Hand Kreativ- und Werbeagentur 
Author: Kopf & Hand Kreativ- und Werbeagentur
Author URI: https://kopf-hand.de
Author Email: hallo@kopf-hand.de
Template: Divi
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

/* Font Import 
@import url('https://fonts.cdnfonts.com/css/filson-pro');*/


@font-face {
  font-family: 'Calendas Bold';
  src: url('/wp-content/uploads/fonts/Calendas_Plus_Bold.eot');
  src: url('/wp-content/uploads/fonts/Calendas_Plus_Bold.eot?#iefix') format('embedded-opentype'),
       url('/wp-content/uploads/fonts/Calendas_Plus_Bold.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/Calendas_Plus_Bold.woff')  format('woff'),
       url('/wp-content/uploads/fonts/Calendas_Plus_Bold.otf')  format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
    font-family: "Calendas Bold";
    src: url("https://db.onlinewebfonts.com/t/bd4e32106fed452eff52820557176372.eot");
    src: url("https://db.onlinewebfonts.com/t/bd4e32106fed452eff52820557176372.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/bd4e32106fed452eff52820557176372.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/bd4e32106fed452eff52820557176372.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/bd4e32106fed452eff52820557176372.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/bd4e32106fed452eff52820557176372.svg#Calendas Bold")format("svg");
    font-weight: 500;
} */

@font-face {
  font-family: 'Calendas';
  src: url('/wp-content/uploads/fonts/Calendas_Plus.eot');
  src: url('/wp-content/uploads/fonts/Calendas_Plus.eot?#iefix') format('embedded-opentype'),
       url('/wp-content/uploads/fonts/Calendas_Plus.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/Calendas_Plus.woff')  format('woff'),
       url('/wp-content/uploads/fonts/Calendas_Plus.otf')  format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
    font-family: "Calendas";
    src: url("https://db.onlinewebfonts.com/t/d8f6a5c5ef861c565ffd82f66ae25788.eot");
    src: url("https://db.onlinewebfonts.com/t/d8f6a5c5ef861c565ffd82f66ae25788.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/d8f6a5c5ef861c565ffd82f66ae25788.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/d8f6a5c5ef861c565ffd82f66ae25788.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/d8f6a5c5ef861c565ffd82f66ae25788.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/d8f6a5c5ef861c565ffd82f66ae25788.svg#Calendas")format("svg");
    font-weight: 300;
} */



:root {
    --color-1:#0F0909;
    --color-2:#F2F4F6;
    --color-3:#4E6671;
    --color-4:#4d2f4b;
    --color-5:#892727;
    --color-6:#004b4e;
    --color-7:#c88200;
    --color-8:#648547;
    --color-white:#fbfcfd;
    --color-darkmode-1: #383838;
    --color-darkmode-2: #1a1e22;
    --color-darkmode-3: #fffbf9;
    
    --font-1: 'Calendas Bold', system-ui, serif;
    --font-2: 'Calendas', system-ui, serif;
    
    --font-size-xxxl:clamp(2.0rem,1rem + 5vw,10rem);
    --font-size-xxl: clamp(2.5rem, 1rem + 3vw, 6rem); 
    --font-size-xl: clamp(2rem, 1rem + 2vw, 4rem);
    --font-size-l: max(2rem, 1.25vw + 1.25rem);
    --font-size-m: max(1.5rem, .75vw + .75rem);
    --font-size-s: max(1.2rem, 1vw);
    --font-size-xs: max(.8rem, .8vw);
    
    --font-weight-xxl: bold;
    --font-weight-xl: bold;
    --font-weight-l: 500;
    --font-weight-m: 500;
    --font-weight-s: 300; 
    --font-weight-xs: normal;
    
    --line-height-xl: 1.1;
    --line-height-l: 1.2;
    --line-height-m: 1.3;
    --line-height-s: 1.4;
    }
    
    
    /* FONTS */
    h1, .et_pb_module_header h1, .fake-h1 {
        font-family: var(--font-1)!important;
        font-size: var(--font-size-xl);
        line-height: var(--line-height-xl);
        font-weight: var(--font-weight-xxl);
    }
      
    h2, .et_pb_module_header h2, .fake-h2 {
        font-family: var(--font-1)!important;
        font-size: var(--font-size-xl);
        line-height: var(--line-height-l);
        font-weight: var(--font-weight-l); 
    }

    .clamp-h1 h2 {
        font-family: var(--font-1)!important;
        font-size: var(--font-size-xxl);
        line-height: var(--line-height-l);
        font-weight: var(--font-weight-l); 
    }
      
    h3, .et_pb_module_header h3,.fake-h3 {
        font-family: var(--font-1)!important;
        font-size: var(--font-size-m);
        line-height: var(--line-height-m);
        font-weight: var(--font-weight-m); 
    }
    
    h4, .et_pb_module_header h4,.fake-h4 {
        font-family: var(--font-1)!important;
        font-size: var(--font-size-m);
        line-height: var(--line-height-m);
        font-weight: var(--font-weight-m);  
    }
    
    h5, .et_pb_module_header h5,.fake-h5 {
        font-family: var(--font-2);
        font-size: var(--font-size-s);
        line-height: var(--line-height-s);
        font-weight: var(--font-weight-s); 
    }
    
    h6, .et_pb_module_header h6,.fake-h6 {
        font-family: var(--font-2);
        font-size: var(--font-size-s);
        line-height: var(--line-height-s);    
        font-weight: var(--font-weight-s);     
    }
    
    p, a, li, ul, td, ol, .clamp-p {
        font-family: var(--font-2);
        font-size: var(--font-size-s);
        line-height: var(--line-height-s);
        font-weight: var(--font-weight-s);     
    }  
    
    .et_pb_contact_field .input {
        font-family: var(--font-2);
        font-size: var(--font-size-s);
        line-height: var(--line-height-s);
        font-weight: var(--font-weight-s);     
    }


    /* Divi Module */
    
    
    /* Umschalter */
    .et_pb_toggle_title {
        font-family: var(--font-1);
        font-size: var(--font-size-s);
        line-height: var(--line-height-s);
        font-weight: var(--font-weight-xl);      
    }
    
    .et_pb_toggle_content clearfix {
        font-family: var(--font-2);
        font-size: var(--font-size-s);
        line-height: var(--line-height-s);
        font-weight: var(--font-weight-s);        
    }
    
    /*Toogle*/
        
    .et_pb_toggle_close .et_pb_toggle_title:before {
        -webkit-transition: all .35s ease;
        -moz-transition: all .35s ease;
        -o-transition: all .35s ease;
        transition: all .35s ease;
    }
    
    .et_pb_toggle_open .et_pb_toggle_title:before {
        -webkit-transition: all .35s ease;
        -moz-transition: all .35s ease;
        -o-transition: all .35s ease;
        transition: all .35s ease;
        transform: rotate(45deg);
    }
    
    
    /* Button 
    
    a.more-link:hover {
        background-color: var(--color-2);
        color: var(--color-1);
        border: 4px solid var(--color-1);
        transition: all 350ms ease-in-out;
        transform: translate(4px, 4px);
        box-shadow: 0px 0px var(--color-1)!important;
        border-radius: 8px!important;
    }  
    
    .et_pb_button.kh-button {
        padding: max(1rem, .5rem + .5vw, .5vw) max(2.5rem,1rem + 1vw, 2vw);
        color: var(--color-1);
        background-color: var(--color-2);
        border-radius: max(.75rem, .5rem + .25vw);
        border-width: max(.2rem, .2vw);
        font-family: var(--font-2);
        font-size: var(--font-size-s);
        font-weight: var(--font-weight-xxl); 
    }
    */
    /* Button Kopf & Hand 
    .et_pb_button .kh-button {
        padding: max(1rem, .5rem + .5vw, .5vw) max(2.5rem,1rem + 1vw, 2vw);
        border-color: var(--color-1);
        color: var(--color-1);
        background-color: var(--color-2);
        border-radius: max(.75rem, .5rem + .25vw);
        border-width: max(.2rem, .2vw);
        font-family: var(--font-2);
        font-size: var(--font-size-s);
        font-weight: var(--font-weight-xxl);
        box-shadow: 7px 7px 0px 0px var(--color-1); 
        transition: transform 500ms ease-in-out, box-shadow 500ms ease-in-out;
    }
    .et_pb_button .kh-button:hover {
        box-shadow: 0px 0px 0px 0px var(--color-1);
        transform: translateX(7px) translateY(7px);
        transition: transform 500ms ease-in-out, box-shadow 500ms ease-in-out;
    }
    */

/* LINK HOVER */
/*Underline Black*/
.underline-black a:hover {
  background-size: 100% 100%;
  color: var(--color-4)!important;
  transition: all .5s ease;

}

.underline-black a, .underline-black a:hover {
  text-decoration: none;
  transition: all .5s ease;
}

.underline-black a {
  background-image: linear-gradient(120deg,var(--color-5) 0%,var(--color-5) 100%);
  color:var(--color-5)!important;
  padding: .2rem .2rem 0 .2rem; 
  background-repeat: no-repeat;
  background-size: 100% .2rem;
  background-position: 0 100%;
  transition: background-size .5s ease-in, color .5s ease;
} 

/*Underline Red*/
.underline-red a:hover {
	background-size: 100% 100%;
	color: var(--color-3)!important;
	transition: all .2s ease-in-out!important;
}

.underline-red a, .underline-red a:hover {
    text-decoration: none;
}

.underline-red a {
	background-image: linear-gradient(120deg,var(--color-5) 0%,var(--color-5) 100%);
    padding:0.02rem 0.25rem; 
    background-repeat: no-repeat;
    background-size: 100% 2px;
	background-position: 0 100%;
    transition: background-size .5s ease-out!important;
    /*color: inherit!important;*/
    color: var(--color-5);
    font-weight: 500;
}

/*Underline var(--color-2)*/
.underline-white a:hover {
	background-size: 100% 100%;
	color: var(--color-5)!important;
	transition: .2s ease-in-out!important;
    font-weight: 700!important;
}

.underline-white a, .underline-white a:hover {
    text-decoration: none;
}

.underline-white a {
	background-image: linear-gradient(120deg,var(--color-4) 0%,var(--color-4) 100%);
    padding:0.15em 0; 
    background-repeat: no-repeat;
    background-size: 100% 2px;
	background-position: 0 100%;
    transition: background-size .5s ease-in!important;
    color: var(--color-4);
    font-weight: 500!important;
}

/*Underline Pink*/
.underline-pink a:hover {
	background-size: 100% 100%;
	color: white!important;
	transition: .2s ease-in-out!important;
     font-weight: 700!important;
}

.underline-pink a, .underline-pink a:hover {
     text-decoration: none;
}

.underline-pink a {
	background-image:  linear-gradient(120deg,var(--color-3) 0%,var(--color-3) 100%);
    padding:0.15em 0; 
    background-repeat: no-repeat;
    background-size: 100% 2px;
	background-position: 0 100%;
    transition: background-size .5s ease-in!important;
    color: inherit!important;
    font-weight: 500;
}

/* Buttons Inline */

/* Column */
.inline-buttons-left .et_pb_button_module_wrapper {
    display: inline-block;
	margin-right:.5rem;
	margin-left:.5rem;
}

/* Button Modul */
.inline-buttons-left {
    text-align: left !important;
}

@media all and (max-width: 480px) {
    .inline-buttons-left .et_pb_button_module_wrapper {
        display: block;
        margin: .15rem;
    }

    .inline-buttons-left {
        text-align: left !important;
    }
}

/* Aufruf */
.et_pb_module_header {
    font-family: var(--font-1);
    font-size: var(--font-size-l);
    line-height: var(--line-height-l);
    font-weight: var(--font-weight-xl);      
}

#et_pb_signup_firstname.input, #et_pb_signup_email, .et_pb_newsletter_button_text, .et_pb_blurb_description, .et_pb_member_position, .et_pb_text_inner p, .dsm-business-hours-day, .dsm-business-hours-time {
    font-family: var(--font-2);
    font-size: var(--font-size-s);
    line-height: var(--line-height-s);
    font-weight: var(--font-weight-s);     
} 

.dsm-business-hours-day  {
    text-align: left;
}
    
.dsm-business-hours-time  {
    text-align: right;
}



/*** SectionDivider Animate ***/

.et_pb_section.wavey > div[class*="_inside_divider"] {
    animation:scaleAnimation 4s infinite;
    animation-timing-function: cubic-bezier(.36,.45,.63,.53);
}    

@keyframes scaleAnimation {
    0%, to {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1,1.4)
    }
}


/***Order of Columns***/

@media all and (max-width: 980px) {
    /*** wrap row in a flex box ***/
    .custom_row {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
    }

    /*** custom classes that will designate the order of columns in the flex box row ***/

    .first-on-mobile {
        -webkit-order: 1;
        order: 1;
    }
     
    .second-on-mobile {
        -webkit-order: 2;
        order: 2;
    }
     
    .third-on-mobile {
        -webkit-order: 3;
        order: 3;
    }
     
    .fourth-on-mobile {
        -webkit-order: 4;
        order: 4;
    }
    
    /*** add margin to last column ***/
    
    .custom_row:last-child .et_pb_column:last-child {
        margin-bottom: 30px;
    }
}

/* ******************************
MENU
******************************* */

/* Menu Slide in */
#slide-in-open{
    cursor: pointer;
}
     
.line{
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: var(--color-1);
    border-radius: .25rem;
    opacity: 1;
    top:-10px;  
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
    z-index:9999999!important;
}
    
.line-2 {
    top: 0px;
    z-index:9999999!important;
}
    
.line-3 {
    top: 10px;
    z-index:9999999!important;
}
    
    
#slide-in-open.open .line-1 {
    top: 0px;
    background:var(--color-1);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    z-index:9999999!important;
}
    
#slide-in-open.open .line-2 {
    display: none;
}
    
#slide-in-open.open .line-3 {
    top: 0px;
    background:var(--color-1);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    z-index:9999999!important;
}
    
#slide-in-open.open .line-3 .et-dark-mode-capable .dark-mode {
    background:#dddddd;
    z-index:9999999!important;
    }
     
.slide-in-menu {
    right: 0!important;
    opacity: 1!important;
}
     
.slide-in-menu-container {
    -webkit-transition: all 0.5s ease!important;
    -moz-transition: all 0.5s ease!important;
    -o-transition: all 0.5s ease!important;
    -ms-transition: all 0.5s easet!important;
    transition: all 0.5s ease!important;
}
        
    
/* Menu Scroll weg und da */
#main-content{
    margin-top: 0px;
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;	
}
     
.hide-header {
    /*display:none;*/
    opacity: 0;
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    margin-top: -200px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
     
.show-header {
    opacity: 1;
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    margin-top: 0px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;	
}
     
#global-header-section {
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
    
#global-header-section2 {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/* DARK MODE */
/* Dark Mode Toggle Styles */

.et-dark-mode {
    transition: all 350ms ease-in-out;
}

.et-dark-toggle {
    cursor: pointer;
    transition: all 350ms ease-in-out;
}

body.et-dark-mode .et-dark-toggle {
    color: var(--color-darkmode-3)!important;
}

body.et-dark-mode .et-dark-toggle:after {
    content:"✨";
    left: -25px;
}
  
body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {
    text-align:right;
}
  
body.et-dark-mode .et-dark-toggle .et-pb-icon {
    color: var(--color-darkmode-3)!important;
}

  /**
   * Body Dark Mode Style
   */
body.et-dark-mode {
    background-color: var(--color-darkmode-1);
}

  /**
  /* Section with dark mode */
.et_pb_section.et-dark-mode-capable.et-dark-mode {
    background-color: var(--color-darkmode-1);
    transition: opacity 350ms ease-in-out;
    color: var(--color-darkmode-3) !important;
}

.dark-sec-1.et_pb_section.et-dark-mode-capable.et-dark-mode, .et_pb_menu_0_tb_header.et_pb_menu .nav li ul, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul .et-dark-mode-capable .et-dark-mode {
    background-color: var(--color-darkmode-2)!important;
}



.et-dark-mode-capable.et-dark-mode .line   {
    background:var(--color-darkmode-3)!important;	
    transition: all 350ms ease-in-out;
  }
  
   /* Row with dark mode */

.et_pb_menu_0_tb_header.et_pb_menu .nav li ul, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul {
    color: var(--color-darkmode-3)!important;
} 

.et_pb_row.et-dark-mode-capable.et-dark-mode, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu .et-pb-dark-mode-capable.et-dark-mode, #mobile_menu1 .et-dark-mode-capable.et-dark-mode, .et_mobile_menu.et-dark-mode-capable.et-dark-mode {
    background-color: var(--color-darkmode-2)!important;
    color: var(--color-darkmode-3)!important;
    transition: all 350ms ease-in-out;
}
  
.et_pb_row.desktop-row.et-dark-mode-capable.et-dark-mode {
    background-color: var(--color-1);
    color: var(--color-darkmode-3)!important;
    transition: all 350ms ease-in-out;
}

.slide-menu.et_pb_row.et-dark-mode-capable.et-dark-mode {
    background-color: var(--color-1);
    color: var(--color-darkmode-3) !important;
    transition: all 350ms ease-in-out;
}
  
  /* Column with dark mode */
.et_pb_column.et-dark-mode-capable.et-dark-mode {
    background-color: var(--color-1)!important;
    color: var(--color-darkmode-3) !important;
    transition: all 350ms ease-in-out;
}

    /* blog */
.et_pb_section.et_builder_inner_content.et_pb_gutters3.et-dark-mode-capable .et-dark-mode {
    background-color: var(--color-darkmode-1)!important;
    color: var(--color-darkmode-3) !important;	
    transition: all 350ms ease-in-out;
}

  /* Module with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode {
    background-color: transparent;
    color: var(--color-darkmode-3) !important;
    transition: all 350ms ease-in-out;
}

  /* Text Headings with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,
.et_pb_module.et-dark-mode-capable.et-dark-mode h1,
.et_pb_module.et-dark-mode-capable.et-dark-mode h2,
.et_pb_module.et-dark-mode-capable.et-dark-mode h3,
.et_pb_module.et-dark-mode-capable.et-dark-mode h4,
.et_pb_module.et-dark-mode-capable.et-dark-mode h5,
.et_pb_module.et-dark-mode-capable.et-dark-mode h6,
.dipl_text_animator_0 .post_text_wrapper .et-dark-mode-capable .et-dark-mode {
    color: var(--color-darkmode-3) !important;
    transition: all 350ms ease-in-out;
}

/*Text Darkmode TITLE and p and a */
.et-dark-mode-capable .et-dark-mode h1,
.et-dark-mode-capable .et-dark-mode h2,
.et-dark-mode-capable .et-dark-mode h3,
.et-dark-mode-capable .et-dark-mode h4,
.et-dark-mode-capable .et-dark-mode h5,
.et-dark-mode-capable .et-dark-mode h6,
.et-dark-mode-capable .et-dark-mode a,
.et-dark-mode-capable .et-dark-mode li,
.dsm_breadcrumbs_0_tb_body .et-dark-mode-capable .et-dark-mode.dsm_breadcrumbs li.dsm_breadcrumbs_item:not(.dsm_breadcrumbs_item_current), 
.et-dark-mode-capable .et-dark-mode.dsm_breadcrumbs_0_tb_body .dsm_breadcrumbs li.dsm_breadcrumbs_item a,
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_0_tb_header.et_pb_blurb .et_pb_module_header, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_0_tb_header.et_pb_blurb .et_pb_module_header a, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_1_tb_header.et_pb_blurb .et_pb_module_header, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_1_tb_header.et_pb_blurb .et_pb_module_header a, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_2_tb_header.et_pb_blurb .et_pb_module_header, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_2_tb_header.et_pb_blurb .et_pb_module_header a, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_3_tb_header.et_pb_blurb .et_pb_module_header, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_3_tb_header.et_pb_blurb .et_pb_module_header a, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_4_tb_header.et_pb_blurb .et_pb_module_header, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_4_tb_header.et_pb_blurb .et_pb_module_header a, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_5_tb_header.et_pb_blurb .et_pb_module_header, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_5_tb_header.et_pb_blurb .et_pb_module_header a,
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_0_tb_header .et_pb_main_blurb_image .et_pb_only_image_mode_wrap, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_0_tb_header .et_pb_main_blurb_image .et-pb-icon, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_1_tb_header .et_pb_main_blurb_image .et_pb_only_image_mode_wrap, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_1_tb_header .et_pb_main_blurb_image .et-pb-icon, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_2_tb_header .et_pb_main_blurb_image .et_pb_only_image_mode_wrap, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_2_tb_header .et_pb_main_blurb_image .et-pb-icon, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_3_tb_header .et_pb_main_blurb_image .et_pb_only_image_mode_wrap, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_3_tb_header .et_pb_main_blurb_image .et-pb-icon, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_4_tb_header .et_pb_main_blurb_image .et_pb_only_image_mode_wrap, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_4_tb_header .et_pb_main_blurb_image .et-pb-icon, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_5_tb_header .et_pb_main_blurb_image .et_pb_only_image_mode_wrap, 
.et-dark-mode-capable .et-dark-mode.et_pb_blurb_5_tb_header .et_pb_main_blurb_image .et-pb-icon,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close h1.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close h2.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close h3.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close h6.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_1.et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_1.et_pb_toggle.et_pb_toggle_close h1.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_1.et_pb_toggle.et_pb_toggle_close h2.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_1.et_pb_toggle.et_pb_toggle_close h3.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_1.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_1.et_pb_toggle.et_pb_toggle_close h6.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_2.et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_2.et_pb_toggle.et_pb_toggle_close h1.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_2.et_pb_toggle.et_pb_toggle_close h2.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_2.et_pb_toggle.et_pb_toggle_close h3.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_2.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_2.et_pb_toggle.et_pb_toggle_close h6.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_3.et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_3.et_pb_toggle.et_pb_toggle_close h1.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_3.et_pb_toggle.et_pb_toggle_close h2.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_3.et_pb_toggle.et_pb_toggle_close h3.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_3.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_3.et_pb_toggle.et_pb_toggle_close h6.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_4.et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_4.et_pb_toggle.et_pb_toggle_close h1.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_4.et_pb_toggle.et_pb_toggle_close h2.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_4.et_pb_toggle.et_pb_toggle_close h3.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_4.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_4.et_pb_toggle.et_pb_toggle_close h6.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_5.et_pb_toggle.et_pb_toggle_close h5.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_5.et_pb_toggle.et_pb_toggle_close h1.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_5.et_pb_toggle.et_pb_toggle_close h2.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_5.et_pb_toggle.et_pb_toggle_close h3.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_5.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_5.et_pb_toggle.et_pb_toggle_close h6.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_6.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_7.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_8.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_9.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_10.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_11.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title, 
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_12.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_13.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_14.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_15.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_16.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_17.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_18.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_19.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_20.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_21.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_22.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_23.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_24.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_25.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_26.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_27.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_28.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_29.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_30.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_31.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_32.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_33.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_34.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title,
.et-dark-mode-capable .et-dark-mode.et_pb_toggle_35.et_pb_toggle.et_pb_toggle_close h4.et_pb_toggle_title {
    color:var(--color-darkmode-3)!important;
    transition: all 350ms ease-in-out;
}
   
.et-dark-mode-capable .et-dark-mode p, ul.dsm_breadcrumbs .et-dark-mode-capable .et-dark-mode {
    color: var(--color-darkmode-3)!important;
    transition: all 350ms ease-in-out;
}
  
  /*Hintergrund Start */
.navigation-start .et_pb_section .et_pb_section_0_tb_header .navigation-start .et-dark-mode-capable .et_pb_with_background .et_section_regular .et_pb_section--fixed .et_had_animation .et-dark-mode-capable.et-dark-mode  {
  background-color:RGBA(255,255,255,0.5);	
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

  /*Blurb Navigation ICON */
.et_pb_module.et_pb_text_align_left.line.line-1 .et-dark-mode-capable .et-dark-mode a {
     background:var(--color-darkmode-3)!important;	
    transition: all 350ms ease-in-out;
}
  
/*divider ausstellen */
.et_pb_section.et-dark-mode-capable.et-dark-mode .et_pb_top_inside_divider,
.et_pb_section.et-dark-mode-capable.et-dark-mode .et_pb_bottom_inside_divider {
    opacity:0;
} 

  
/*section in dark mode weg und andere da */
.sec-agentur-1.et_pb_section.et_pb_section_0.et-dark-mode.et-dark-mode-capable  {
  display:none;
}

.sec-agentur-2.et_pb_section.et_pb_section_1 {
  display:none;
}

.sec-agentur-2.et_pb_section.et_pb_section_1.et-dark-mode.et-dark-mode-capable  {
  display:block!important;
  opacity: 1!important;
}
  
/*section start TEAM mode weg und andere da */
  
.sec-start-1.et_pb_section.et-dark-mode.et-dark-mode-capable  {
  display:none;
}
  
.sec-start-2.et_pb_section {
  display:none;
}
  
.sec-start-2.et_pb_section.et-dark-mode.et-dark-mode-capable  {
  display:block!important;
}
  
/* bildunterschrift with dark mode */  
.wp-block-image figcaption {
  margin-bottom:20px;	
}

.et-dark-mode.et-dark-mode-capable .wp-block-image figcaption {
  color:#ddd6!important;	
}
  
/* blogübersicht with dark mode */
.et-dark-mode-capable .et-dark-mode .et_pb_post ,
.et_pb_blog_0_tb_body .et_pb_post .et-dark-mode-capable.et-dark-mode,
.et-dark-mode-capable.et-dark-mode .et_pb_post_extra.el_dbe_vertical_grid .post-content,
.et-dark-mode-capable.et-dark-mode .et_pb_post_extra.el_dbe_block_extended.image-top .post-content {
    background-color: var(--color-darkmode-2);
}
  
.et-dark-mode-capable.et-dark-mode.et_pb_blog_0_tb_body .et_pb_post .entry-title a,
.et-dark-mode-capable.et-dark-mode.et_pb_blog_0_tb_body .et_pb_post .entry-title h4,
.et-dark-mode-capable.et-dark-mode.et_pb_blog_0 .et_pb_post .entry-title a, 
.et-dark-mode-capable.et-dark-mode.et_pb_blog_0 .not-found-title,
.et-dark-mode-capable.et-dark-mode.et_pb_comments_0_tb_body .comment_postinfo span,
.et-dark-mode-capable.et-dark-mode .dsm_breadcrumbs_0_tb_body .dsm_breadcrumbs .dsm_breadcrumbs_separator .dsm_separator_icon,
.et-dark-mode-capable.et-dark-mode .et_pb_blog_extras_0 .et_pb_post.et_pb_post_extra .entry-title h4,
.et-dark-mode-capable.et-dark-mode .et_pb_blog_extras_0 .et_pb_post.et_pb_post_extra .entry-title a {
    color:var(--color-darkmode-3)!important;	
}
  
.et_pb_section.et-dark-mode-capable.et-dark-mode{
  background-color: var(--color-darkmode-1)!important;
}  
  
.et-dark-mode-capable.et-dark-mode.et_pb_blog_0_tb_body.et_pb_bg_layout_light .et_pb_post .post-content p,
.et-dark-mode-capable.et-dark-mode.et_pb_blog_0 .et_pb_post, .et-dark-mode-capable.et-dark-mode.et_pb_blog_0 .et_pb_post .post-content p,
.et-dark-mode-capable.et-dark-mode.et_pb_comments_0_tb_body .comment-content p,
.et-dark-mode-capable.et-dark-mode.et_pb_blog_extras_0 .et_pb_post.et_pb_post_extra .post-content .post-data p,
.et-dark-mode-capable.et-dark-mode .et_pb_blog_0 .pagination a {
    color:var(--color-darkmode-3)!important;
    transition: all 350ms ease-in-out;
}
  
.et-dark-mode-capable.et-dark-mode.logo-nav.et_pb_image .et_pb_image_wrap img {
    filter:invert(1);	
    transition: all 350ms ease-in-out;
}

.et-dark-mode-capable .et-dark-mode .et_pb_blog_extras_0 .et_pb_post.et_pb_post_extra .post-meta, 
.et-dark-mode-capable .et-dark-mode .et_pb_blog_extras_0 .et_pb_post.et_pb_post_extra .post-meta a, 
.et-dark-mode-capable .et-dark-mode .et_pb_blog_extras_0 .et_pb_post.et_pb_post_extra .post-meta span, 
.et-dark-mode-capable .et-dark-mode .et_pb_blog_extras_0 .et_pb_post.et_pb_post_extra .post-date {
  background-color:var(--color-1)!important; 
  padding-top: 5px;
  padding-bottom: 5px;
}


/* BLOG */

.et_pb_blog_grid .et_pb_post {
    padding:1em!important;
}
  
button#et_pb_submit.submit.et_pb_button:hover, 
a.comment-reply-link.et_pb_button:hover {
    box-shadow: 0px 0px 0px 0px var(--color-1)!important;
    transform:translate(7px,7px)!important;
    transition: ease-out 200ms;
}
  
body #main-content .et_builder_inner_content>p {
    line-height: 1.4em!important;
}
  
@media all and (min-width: 979px) {
  .wp-block-rank-math-toc-block {
    display:none!important;
  }
}

/* Blogpost-Img Spin*/
.et_pb_post .entry-featured-image-url {
	margin: 0;
}
.et_pb_blog_grid .et_pb_image_container {
	overflow: hidden;
}
.et_pb_blog_grid .et_pb_image_container img {
	transition: all 0.95s ease;
	-moz-transition: all 0.95s ease;
	-webkit-transition: all 0.95s ease;
}
.et_pb_blog_grid .et_pb_post:hover img {
	transform: scale(1.15) rotate(1deg);
	-moz-transform: scale(1.15) rotate(1deg);
	-webkit-transform: scale(1.15) rotate(1deg);
}

.et_pb_post_slider_0.et_pb_slider_with_text_overlay .et_pb_text_overlay_wrapper {
    border-radius: .25rem!important;
	border: solid 5px var(--color-1)!important;
}

.et_pb_has_overlay:not(.et_pb_image):hover .et_overlay {
	opacity:0!important;
}

.et_contact_bottom_container {
    float: left;
    text-align: center;
    display: block !important;
}

.et_pb_post .post-meta a { 
    pointer-events: none;
    cursor: default;
}

.et_mehr-blog .et_pb_post .post-meta a { 
    pointer-events: auto!important;
    cursor: pointer!important;
}




/* SECTIONS */

/*Section Gradient Ani-BLACK*/
.sec-gradient-1 {
	background: linear-gradient(-45deg, #f3f790, #47e09a, #3ef3da, #629aef);
	background-size: 400% 400%;
	animation: gradient 7s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}




/*ROWS*/

/* Querformat */
@media (orientation: landscape) {
    .et_pb_row {
        width:calc(100% - 35vw)!important;
        max-width:100vw!important;
        margin:0 auto;
    }

    .et_pb_row.feld-row {
        width: 100% !important;
        max-width:calc(100vw - 25vw)!important;    
        padding: 2rem 5%;       
    }

    .et_pb_row.desktop-row {   
        width: 100% !important;
        max-width:calc(100vw - 35%)!important;
    }

    .et_pb_row.nav-row {   
        width:100%!important;  
        max-width:100%!important;
    }
}

/* Hochformat */
@media (orientation: portrait) {
    .et_pb_row.desktop-row { 
        width:100%!important;  
        max-width:calc(100vw - 15%)!important;
    }

    .et_pb_row.feld-row {
        width: 100% !important;
        max-width:calc(100vw - 7.5vw)!important;
        padding: 1rem 5%;           
    }

    .et_pb_row.nav-row {   
        width:100%!important;  
        max-width:100%!important;
    }

    .et_pb_row {
        width:calc(100% - 15vw)!important;
        max-width:100vw!important;
        margin:0 auto;
    }
}

/* iPad */
@media only screen and (min-width:981px) and (max-width:1440px) {
    .et_pb_row {
        width:calc(100% - 15vw)!important;
        max-width:100vw!important;
        margin:0 auto;
    }

    .et_pb_row.feld-row {
        width: 100% !important;
        max-width:calc(100vw - 5vw)!important;
        padding: 2rem 5%;       
    }

    .et_pb_row.desktop-row {   
        width: 100%!important;
        max-width:calc(100vw - 20%)!important;
    }

    .et_pb_row.nav-row {   
        width: 100%!important;
        max-width:100%!important;
    }
}



/* Float */
.float-1 {
    transform: translatey(0px);
    animation: float-1 6s ease-in-out infinite;
    }
    
@keyframes float-1 {
        0% {
            transform: translatey(0px);
        }
        50% {
            transform: translatey(-25px);
        }
        100% {
            transform: translatey(0px);
        }
}
    
.float-2 {
        transform: translatey(0px);
        animation: float-2 7s ease-in-out infinite;
    }
    
    @keyframes float-2 {
        0% {
            transform: translatey(0px);
        }
        50% {
            transform: translatey(-15px);
        }
        100% {
            transform: translatey(0px);
      }
}
    
.float-3 {
        transform: translatey(0px);
        animation: float-3 8s ease-in-out infinite;
    }
    
    @keyframes float-3 {
        0% {
            transform: translatey(0px);
        }
        50% {
            transform: translatey(-20px);
        }
        100% {
            transform: translatey(0px);
      }
}

/* Rotating */
.rotating {
    -webkit-animation: rotating 16s linear infinite;
    animation: rotating 16s linear infinite;
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(360deg);
    }
    to{
        -webkit-transform: rotate(0deg);
    }
}

@keyframes rotating {
      from{
          -webkit-transform: rotate(360deg);
      }
      to{
          -webkit-transform: rotate(0deg);
      }
}

/* Button Bounce */
.bounce-icon {
    -moz-animation: bounce-icon 2s infinite;
    -webkit-animation: bounce-icon 2s infinite;
    animation: bounce-icon 2s infinite;
}
    
@keyframes bounce-icon {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
      40% {
        transform: translateY(-15px);
    }
      60% {
        transform: translateY(-10px);
    }
}

/* KARUSSELL */

.stock-ticker {
    font-size: var(--font-size-s);
    overflow: hidden;
    user-select: none;

    --gap: 1.5rem;
    display: flex;
    gap: var(--gap);
  }

  .stock-ticker ul {
    list-style: none;
    flex-shrink: 0;
    min-width: 200%; /* Doppelte Breite für kontinuierliches Scrollen */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);

    animation: scroll 60s linear infinite;
  }

  .stock-ticker:hover ul {
    animation-play-state: paused;
  }

  @keyframes scroll {
    to {
      transform: translateX(-50%); /* Verschiebe nur bis zur Hälfte der Breite */
    }
  }

  .stock-ticker .company {
    font-weight: bold;
  }

  .stock-ticker .plus {
    border-radius: .25rem;
    background-color: var(--color-3);
    padding: 1rem 2rem;
    color: var(--color-5);
  }

/* Progress Bar */

.progressBar-ani {
  left: 0;
  animation: expandWidth 3s forwards ease-out 1s; /* Animation mit Verzögerung */
  animation-timeline:view();
  animation-range: entry 70%;
}

@keyframes expandWidth {
  0% { width: 0; }
  100% { width: 15%; }
}

.progressBar-ani:hover {
	width:5%;    
	transition: all .5s ease;
}


/*Overflow*/
body, html {
    overflow-x: hidden!important;
    overflow: overlay!important;
    max-width: 100%!important;
    
    hyphens:auto;
    -webkit-hyphens:auto;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -ms-hyphens: auto;
    
    word-wrap: break-word;
    -webkit-word-wrap: break-word;
    -moz-word-wrap: break-word;
    -o-word-wrap: break-word;
    -ms-word-wrap: break-word;    
}

#page-container { overflow:hidden; }

/*CURSOR*/

.hide-cursor, .hide-cursor * {
    cursor: none!important;
}
 
.cursor {
    -webkit-transition: all 0.2s ease !important;
    -moz-transition: all 0.2s ease !important;
    -o-transition: all 0.2s ease !important;
    transition: all 0.2s ease !important;
    visibility: hidden;
    opacity: 0;
}
 
.show-cursor {
    visibility: visible !important;
    opacity: 1;
}



@media only screen and (max-width: 600px) and (min-width: 300px) {
	.et_pb_slide_description, .et_pb_slider_fullwidth_off .et_pb_slide_description {
		padding: 0!important;	
    }	
}	

.et_pb_post_slider_0.et_pb_slider_with_text_overlay .et_pb_text_overlay_wrapper {
    border-radius: .25rem!important;
	border: solid 5px var(--color-1)!important;
}

.et_pb_has_overlay:not(.et_pb_image):hover .et_overlay {
	opacity:0!important;
}

.et_contact_bottom_container {
    float: left;
    text-align: center;
    display: block !important;
}

.et_pb_post .post-meta a { 
    pointer-events: none;
    cursor: default;
}

.et_mehr-blog .et_pb_post .post-meta a { 
    pointer-events: auto!important;
    cursor: pointer!important;
}

/* Load More */
.el-load-more {
    font-family:Capitana, sans-serif;
    font-weight:700;
    margin-top:20px;
    max-width:100%;
    background-color:white;
    color:var(--color-1);
    padding-top:6px;
    border:4px;
    border-radius:.25rem;
    box-shadow: 7px 7px var(--color-1);
    text-align:center;
    transition: width 2s, height 2s, transform 2s, ease-out 750ms!important;	
}
    
    .el-load-more:hover {
    transform: translate(7px,7px);
    box-shadow: 0px 0px var(--color-1);
    border-radius: .25rem;
    transition: ease-in 200ms!important;
}

/* NAME INPUT */
/*** NameInput JavaScript Jobs ***/
#name-input {
    font-size:1.1em;
    font-family: var(--font-1);
	text-align:center;
    font-weight: var(--font-weight-l);
    padding: 0;
    border-radius: 0px;
    border: 0px;
    border-bottom: 0.15em solid var(--color-3);
    width:75%;
    max-width: 20rem;
    background-color: transparent;
    color: var(--color-3);
    line-height: 1.5em;
}

/*************

SNOW



body {
   position: relative;
}
body:before {
   content: '';
   display: block;
   position: absolute;
   z-index: 2;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   background-image: url('https://s3.amazonaws.com/divi-life-plugin-layouts/tutorials/snow/divi-life-snowflakes-b.png'), url('https://s3.amazonaws.com/divi-life-plugin-layouts/tutorials/snow/divi-life-snowflakes-c.png'), url('https://s3.amazonaws.com/divi-life-plugin-layouts/tutorials/snow/divi-life-snowflakes-a-1.png');
    animation: divi-life-snow 10s linear infinite;
}
@keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-webkit-keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

************* */ 



/***NAVIGATION *******/

/*change Divi hamburger menu to X*/
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}
/*rotate the Divi Menu icon on click*/
.mobile_menu_bar:before {
	transition: all .4s ease-in-out;
	transform: rotate(0deg);
	display: block;
}
/*rotate the Divi Menu icon on click*/
.mobile_nav.opened .mobile_menu_bar::before {
	transition: all .4s ease-in-out;
	transform: rotate(-90deg);
	display: block;
}


.dsm-inner-content .et_pb_button, .et_pb_button_inner {
	margin:2rem;
}

@media (min-width: 981px) {
	.et_pb_section_sticky .et_pb_row.et-last-child, .et_pb_section_sticky .et_pb_row:last-child {
        padding-bottom: auto!important;
    }
	    .et_pb_gutters3 .et_pb_column_3_4 .et_pb_module, .et_pb_gutters3.et_pb_row .et_pb_column_3_4 .et_pb_module {
        margin-bottom: 0%;
    }
	.et_pb_icon_0_tb_header {
        margin-left: 0;
        margin-right: 0;
    }
	    .text-contact {
      width: calc(100% - 47.5vw);
    } 
}

.et_pb_button.dsm_button {
  font-size:clamp(1.2rem, 1rem + 1vw, 1vw)!important;
  backdrop-filter:blur(60px);
  -webkit-backdrop-filter:blur(60px);
}
.et_pb_button.dsm_button:hover {
transform:translate(.5rem, 0px);
}

 .text-contact {
    width:calc(100% - 35vw);
  }
  
 
  
  .service-container {
    display:flex;
    flex-direction: row;
    justify-content:flex-start;
    align-items:flex-start;
    gap:1rem;
  }
  
  .service-container-heading {
    width:70%;
  }
  
	.service-container-text {
		width:100%;
  }
  
	.service-container-text {
  	display:flex;
  	flex-direction:column;
  	gap:1rem;
  }
  
  @media (orientation:portrait) {
    .service-container {
			flex-direction: column;
      gap:0;
  }  
}



.et_mobile_menu li a {
    border-bottom:none;
}

.et_mobile_menu li a, .nav li li a {
    font-size: max(1.2rem, 1vw);
}


/*NAV*/
@media (max-width: 980px) {
    .et_pb_menu .et_mobile_menu {
        top: calc(100% - -1.5vh);
        left: calc(100vw - 127.5%);
	width:105vw;
	padding: 5%;
    }
}



.verlauf {
	/*background: linear-gradient(-45deg, #A90F38, #CE1244, #EB1E55, #EF426F, #F2698D);*/
	background: linear-gradient(-45deg, #000000, #211d1d, #232332, #303a2d, #111e17)!important;
	background-size: 400% 400%;
	animation: ani-gradient 7s ease infinite;
}
@keyframes ani-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}  


/***Order of Columns***/
  
  @media all and (max-width: 980px) {
      /*** wrap row in a flex box ***/
      .custom_row {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
      -webkit-flex-wrap: wrap; /* Safari 6.1+ */
      flex-wrap: wrap;
      }
  
      /*** custom classes that will designate the order of columns in the flex box row ***/
  
      .first-on-mobile {
          -webkit-order: 1;
          order: 1;
      }
       
      .second-on-mobile {
          -webkit-order: 2;
          order: 2;
      }
       
      .third-on-mobile {
          -webkit-order: 3;
          order: 3;
      }
       
      .fourth-on-mobile {
          -webkit-order: 4;
          order: 4;
      }
    
          /*** add margin to last column ***/
      
      .custom_row:last-child .et_pb_column:last-child {
          margin-bottom: 1rem;
      }
  }



 /* ANIMATION SEITEN*/
  
  @keyframes move-out {
    from {
      opacity:1;
    }
  
    to {
      opacity:0;
    }
  }
  
  @keyframes move-in {
    from {
      opacity:0;
    }
  
    to {
      opacity:1;
    }
  }
  
  /* @view-transition {
    navigation: auto;
  } */
  
  ::view-transition-old(root) {
    animation: 0.3s ease-out both move-out;
  }
  
  ::view-transition-new(root) {
    animation: 0.3s ease-in both move-in;
  }


/****************************  KONTAKTFORM   *********************************/  


.et_pb_contact_submit {
    display: flex;
    align-items: center;
    justify-content: center; 
    font-size: var(--font-size-s);
    font-family: var(--font-2);
    font-weight: var(--font-weight-l);
    background-color: var(--color-2);
    color: var(--color-3);
    padding: .75rem 2rem;
    border-radius: .25rem;
    border: .225rem solid var(--color-3);
    box-shadow: 0.1rem 0.1rem 0 0 var(--color-3), 0.2rem 0.2rem 0 0 var(--color-3), 0.3rem 0.3rem 0 0 var(--color-3), 0.4rem 0.4rem 0 0 var(--color-3), 0.5rem 0.5rem 0 0 var(--color-3); 
    transform: translate(0rem, 0rem);
    transition: all .75s ease-out;
}
  
  
.et_pb_contact_submit:hover {
    box-shadow: 0rem 0rem 0 0 var(--color-3);
    transform: translate(0.5rem, 0.5rem); 
    transition: all .2s ease-in;
}


.wp-block-image {
    margin: 1em 0 1em;
}

::selection {
    background-color: var(--color-3);
    color:var(--color-white);
}

p.et_pb_contact_field {
    padding: 0 0 0 0;
}

/*******************************************************************/

/*******************************************************************/
      
      
  /************************        Beleuchtet         *************************/	
  .beleuchtet {
    --x-px: calc(var(--x) * 1px);
    --y-px: calc(var(--y) * 1px);
    --border: 2px;
    overflow: hidden;
    position: relative; /* Wichtig für absolute Kinder */
}

.beleuchtet:before,
.beleuchtet:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    inset: 0px;
    border-radius: inherit;
    background: radial-gradient(clamp(20rem, 25vw + 1rem, 50vw) circle at var(--x-px) var(--y-px), rgba(255, 255, 255, 0.5), transparent 50%);
    opacity: 0; /* Standardzustand: Unsichtbar */
    transform-origin: var(--x-px) var(--y-px);
    transition: opacity 0.4s ease, transform 0.4s ease; /* Weiche Übergänge */
}

.beleuchtet:hover:before,
.beleuchtet:hover:after {
    opacity: 1; /* Effekt wird sichtbar */
    transform: scale(1); /* Optional, um Größe zu animieren */
}

.beleuchtet:not(:hover):before,
.beleuchtet:not(:hover):after {
    opacity: 0; /* Verblasst beim Verlassen */
}

.beleuchtet:before {
    z-index: 1;
}

.beleuchtet:after {
    z-index: 2;
}

.beleuchtet .feature-content {
    border-radius: inherit;
    color: white;
    text-decoration: none;
    z-index: 3;
    position: absolute;
    inset: var(--border);
}

.beleuchtet .feature-content strong {
    align-self: self-end;
    font-size: 125%;
}

.beleuchtet .feature-content span {
    opacity: 1;
}


/************************************************************************************/
.flex {
    display:flex;
    justify-content: center;
    align-items: center;
}

/************************************************************************************/

@keyframes wobble {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-6deg); }
    30% { transform: rotate(5deg); }
    45% { transform: rotate(-5deg); }
    60% { transform: rotate(6deg); }
    75% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
  }

#left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, .et-l--header ul {
    list-style-type: disc;
    padding: 0 0 0px 1em;
    line-height: 26px;
}

.gradient-animation-hell {
  position:absolute;
  z-index:auto;
    top: 5%;
    left: 30%;
	right:30%;
    width: 50rem;
    height: 25rem;
    filter: blur(80px);
    background-image: linear-gradient(#ffffff, #ffea92, #ffd66c, #edba66);
    animation: rotate-hell 10s cubic-bezier(0.8,0.2,0.2,0.8) alternate infinite;
    border-radius: 50% 70% 70% 50% / 50% 50% 70% 70%;
}

@keyframes rotate-hell {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.gradient-animation {
  position:absolute;
  z-index:auto;
  width: 60vw;
  height: 90vh;
  filter: blur(80px);
  background-image:linear-gradient(#f3f790, #47e09a, #3ef3da, #629aef);
  animation: rotate 10s cubic-bezier(0.8, 0.2, 0.2, 0.8) alternate infinite;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}


/** Button 4 **/

a {
	color:inherit;
}

.button-container {
  padding:.5rem 0;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:auto;
  min-width:300px;
  height:clamp(2.5rem, 5rem + 1vw, 10rem);
}

.fill-top-2 {
  font-size: var(--font-size-s);
  font-family: var(--font-1);
  font-weight: var(--font-weight-l);
  position: relative;
  height: auto;
  width: auto;
  padding: .75rem 2rem;
  color: var(--color-2);
  border: .25rem var(--color-2) solid;
  border-radius: 50rem;
  text-transform: none;
  outline: 0;
  overflow:hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition: all .2s ease-in;
}

.fill-top-2:hover {
  color: var(--color-1);
}

.fill-top-2:before {
  content: "";
  position: absolute;
  background-color: var(--color-2);
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  transition: top .6s ease-out;
}

.fill-top-2:hover:before {
  top: 0;
  transition: all .2s ease-in;
}

.fill-top {
  font-size: var(--font-size-s);
  font-family: var(--font-1);
  font-weight: var(--font-weight-l);
  position: relative;
  height: auto;
  width: auto;
  padding: .75rem 2rem;
  color: var(--color-1);
  border: .25rem var(--color-1) solid;
  border-radius: 50rem;
  text-transform: none;
  outline: 0;
  overflow:hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition: all .2s ease-in;
}

.fill-top:hover {
  color: var(--color-2);
}

.fill-top:before {
  content: "";
  position: absolute;
  background-color: var(--color-1);
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  transition: top .6s ease-out;
}

.fill-top:hover:before {
  top: 0;
  transition: all .2s ease-in;
}

.et_pb_blurb.wobble:hover .et_pb_main_blurb_image {
    animation: wobble 0.6s;
	transition: all .2s ease;
}

.et_pb_blurb_container {
	vertical-align:middle!important;
}
.et_pb_module_header {
	padding-bottom:0!important;
}
/************************************************************************************/



/************************************************************************************
/************************************************************************************
/************************************************************************************
MONSTER MAP
/************************************************************************************
/************************************************************************************
/************************************************************************************/
#map {
    width: 100%;
    min-height: 70vh;
  	border-radius:.25rem;
  	border: .25rem var(--color-3) solid;
}

@media (max-width: 768px) {
    #map {
        min-height: 50vh;
    }
}
  
  .leaflet-touch .leaflet-bar {
    border:none;
  }  
  
.leaflet-container a {
    color: var(--color-3);
    font-size: var(--font-size-s);
    font-family: var(--font-1);
    /* text-align: center; */
    display: flex;
    align-items: center;
    justify-content: center;
  	margin: 0 0 .5rem;
}

.leaflet-right .leaflet-control a {
    color: var(--color-3);
    font-size: 10px;
    font-family: var(--font-1);
    /* text-align: center; */
    display: inline-flex;
  	flex-wrap:wrap;
    align-items: center;
    justify-content: center;
}
  
.leaflet-popup-content {
  	width: auto;
    max-width:100%;
    margin: 8px 11px 8px 12px;
  }  


  #filter-container {
    display: flex;
    justify-content: center;
  	gap:.25rem;
  	margin: .25rem 0 1rem 0;
    flex-wrap:wrap;
}

#filter-container button {
    padding: .75rem 1.25rem;
    background-color: var(--color-3);;
    color: var(--color-2);
    border: none;
  	border-radius:50rem;
  	font-size:var(--font-size-xs);
  	font-family:var(--font-1);
    cursor: pointer;
  	transition: background-color .5s ease, padding .5s ease;
}

#filter-container button:hover {
    background-color: var(--color-5);
    padding: .75rem 2rem;
}
  
img.monster-thumb {
		width:100%;
  	max-width:200px;
  	height:auto;
  	border-radius:.25rem;
}
  
  .leaflet-popup-tip {
    background: rgba(255,255,255,0.1);
    backdrop-filter:blur(20px);
  }
  
  .leaflet-popup-content-wrapper {
    background: rgba(255,255,255,0.1);
    backdrop-filter:blur(20px);
    width:200px;
  }


.foot {
  width: 60px;
  height: 26px;
  position: absolute;
  opacity: 1;
  background-image: url("/wp-content/uploads/2024/12/footstep.svg");
  background-size: 100% 100%;
  transform-origin: 50% 0%;
  mix-blend-mode: multiply;
  pointer-events: none;
  overflow-x: hidden;
}

/* ============================================================
   MONSTER KARTE FILTER
   ============================================================ */

#monster-map-container {
    font-family: var(--font-2);
    position: relative;
}

/* 2-Spalten Layout: Filter links, Karte rechts */
#monster-map-container.monster-map-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: .5rem;
    align-items: stretch; /* Karte und Sidebar gleich hoch */
}

/* Sidebar - max 90vh mit Scroll */
#monster-map-sidebar {
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-3) transparent;
}

#monster-map-sidebar::-webkit-scrollbar {
    width: 6px;
}

#monster-map-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

#monster-map-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--color-3);
    border-radius: .25rem;
}

#monster-map-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-1);
}

/* Scroll Indicator */
.monster-scroll-indicator {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to top, var(--color-white) 60%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
    margin-top: -40px;
}

.monster-scroll-indicator.visible {
    opacity: 1;
    visibility: visible;
}

.monster-scroll-indicator i {
    font-size: 1.25rem;
    color: var(--color-3);
    animation: bounce 1.5s infinite;
}

.monster-scroll-indicator:hover i {
    color: var(--color-1);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(5px);
    }
    60% {
        transform: translateY(3px);
    }
}

/* Map Suche in Sidebar - Card Style */
.monster-map-search {
    position: relative;
    margin-bottom: .5rem;
    padding: 1.25rem;
    background: var(--color-2);
    border-radius: .25rem;
    border: 1px solid var(--color-3);
}

.monster-map-search .monster-suche-input-wrapper {
    position: relative;
}

.monster-map-search .monster-suche-input {
    width: 100%;
    padding: .75em 2.75em .75em 1.25em;
    font-size: var(--font-size-xs);
}

/* Filter Cards */
.monster-filter-card {
    padding: 1.25rem;
    background: var(--color-2);
    border-radius: .25rem;
    border: 1px solid var(--color-3);
    margin-bottom: .5rem;
}

.monster-filter-card:last-child {
    margin-bottom: 0;
}

.monster-filter-card label {
    font-family: var(--font-2);
    font-size: var(--font-size-xs);
    color: var(--color-1);
}

.monster-filter-card strong {
    font-family: var(--font-1);
    font-size: var(--font-size-xs);
    color: var(--color-1);
    display: block;
    margin-bottom: .5rem;
}

/* Desktop: Header verstecken */
.monster-sidebar-header {
    display: none;
}

/* Mobile Filter Toggle Button */
.monster-filter-toggle {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    background: var(--color-1);
    color: var(--color-2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.monster-filter-toggle:hover {
    background: var(--color-5);
    transform: scale(1.1);
}

.monster-filter-toggle i {
    transition: transform 0.3s ease;
}

.monster-filter-toggle.active i {
    transform: rotate(180deg);
}

/* Mobile Slide-In Panel */
@media (max-width: 900px) {
    #monster-map-container.monster-map-layout {
        display: block;
    }

    .monster-filter-toggle,
    #monster-filter-toggle,
    button.monster-filter-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #monster-map-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    #monster-map-sidebar.open {
        opacity: 1;
        visibility: visible;
    }

    #monster-map-sidebar .monster-sidebar-inner {
        width: 100%;
        max-width: 380px;
        max-height: 90%;
        background: var(--color-white);
        border-radius: .25rem;
        padding: 1.5rem;
        overflow-y: auto;
        opacity: 0;
        transform: scale(0.9);
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    #monster-map-sidebar.open .monster-sidebar-inner {
        transform: scale(1);
        opacity: 1;
    }

    /* Slide-In Header mit Schließen-Button - Sticky */
    .monster-sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        position: sticky;
        top: -1.5rem;
        margin: -1.5rem -1.5rem 1rem -1.5rem;
        padding: 1rem 1.5rem;
        background: var(--color-white);
        border-bottom: 1px solid var(--color-3);
        border-radius: .25rem .25rem 0 0;
        z-index: 10;
    }

    .monster-sidebar-header h3 {
        font-family: var(--font-1);
        font-size: var(--font-size-m);
        margin: 0;
        color: var(--color-1);
    }

    .monster-sidebar-close {
        width: 2.5rem;
        height: 2.5rem;
        background: var(--color-5);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 1rem;
        color: var(--color-2);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .monster-sidebar-close:hover {
        background: var(--color-3);
        color: var(--color-white);
    }

    .monster-map-search {
        margin-bottom: 1.5rem;
    }

    /* Scroll Indicator für Mobile - im scrollbaren Container */
    .monster-scroll-indicator {
        position: sticky;
        bottom: -1.5rem;
        margin: 0 -1.5rem -1.5rem -1.5rem;
        border-radius: 0 0 .25rem .25rem;
    }
}

/* Gattung Radio Buttons */
.monster-gattung-radios {
    display: flex;
    gap: .25rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}

.monster-gattung-radio {
    position: relative;
    cursor: pointer;
}

.monster-gattung-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.monster-gattung-radio .radio-label {
    display: inline-block;
    padding: .25em 1em .1em;
    font-family: var(--font-2);
    font-size: var(--font-size-xs);
    background: var(--color-white);
    border: .15rem solid var(--color-1);
    border-radius: 50rem;
    color: var(--color-1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.monster-gattung-radio input[type="radio"]:checked + .radio-label {
    background: var(--color-1);
    color: var(--color-white);
}

.monster-gattung-radio:hover .radio-label {
    border-color: var(--color-5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.monster-gattung-radio input[type="radio"]:focus + .radio-label {
    outline: 2px solid var(--color-5);
    outline-offset: 2px;
}

/* Filter Dropdowns (alle gleich gestylt) */
#monster-kategorie-filter,
#monster-ordnung-filter,
#monster-familie-filter,
#monster-gattung-art-filter,
#monster-verbreitung-filter {
    display: block;
    width: 100%;
    margin-top: .5rem;
    padding: .6rem 1rem;
    font-family: var(--font-2);
    font-size: var(--font-size-xs);
    background: var(--color-white);
    border: .15rem solid var(--color-1);
    border-radius: 50rem;
    color: var(--color-1);
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230F0909' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

#monster-kategorie-filter:hover,
#monster-kategorie-filter:focus,
#monster-ordnung-filter:hover,
#monster-ordnung-filter:focus,
#monster-familie-filter:hover,
#monster-familie-filter:focus,
#monster-gattung-art-filter:hover,
#monster-gattung-art-filter:focus,
#monster-verbreitung-filter:hover,
#monster-verbreitung-filter:focus {
    border-color: var(--color-5);
    outline: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Themen Grid */
.monster-themen-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: .5em;
}

.monster-themen-grid label {
    display: flex;
    align-items: center;
    /* padding: .4rem .6rem; */
    background: var(--color-white);
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-size-xs);
}

.monster-themen-grid label:hover {
    border-color: var(--color-3);
    background: var(--color-2);
}

.monster-themen-grid input[type="checkbox"] {
    margin-right: .5rem;
    accent-color: var(--color-4);
    width: 1.1em;
    height: 1.1em;
}

.et_block_row .et_pb_column {
  float:none;
}

/* Reset Button */
#monster-filter-reset {
    display: inline-block;
    padding: .5em 1em .33em;
    font-family: var(--font-1);
    font-size: var(--font-size-xs);
    font-weight: 700;
    background: var(--color-1);
    color: var(--color-2);
    border: .15rem solid var(--color-1);
    border-radius: 50rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

#monster-filter-reset:hover {
    background: var(--color-5);
    border-color: var(--color-5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

#monster-filter-reset .button-text {
    display: inline-block;
    transition: transform 0.2s ease-out;
    position: relative;
    z-index: 1;
}

/* ============================================================
   MONSTER MAP LISTE (unterhalb der Karte)
   ============================================================ */

.monster-map-liste-container {
    margin-top: 2rem;
    /* padding: 2rem; */
    /* background: var(--color-2); */
    border-radius: .25rem;
}

.monster-map-liste-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.monster-map-liste-header h3 {
    font-family: var(--font-1);
    font-size: var(--font-size-m);
    color: var(--color-7);
    margin: 0;
}

.monster-map-liste-header h3 span {
    color: var(--color-7);
    font-weight: 700;
}

.monster-map-liste-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 980px) {
    .monster-map-liste-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 600px) {
    .monster-map-liste-container {
        padding: 1rem;
    }

    .monster-map-liste-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* Monster Map Liste - Loader & End Message */
.monster-map-liste-container .monster-liste-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: #666;
}

.monster-map-liste-container .monster-liste-loader.hidden {
    display: none;
}

.monster-map-liste-container .monster-liste-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #eee;
    border-top-color: var(--color-1, #0073aa);
    border-radius: 50%;
    animation: monster-spin 0.8s linear infinite;
}

@keyframes monster-spin {
    to {
        transform: rotate(360deg);
    }
}

.monster-map-liste-container .monster-liste-end {
    text-align: center;
    padding: 2rem;
    color: #999;
    font-style: italic;
}

.monster-map-liste-container .monster-liste-end.hidden {
    display: none;
}

/* Kategorie Buttons */
#category-filter-container {
    margin-top: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.monster-category-btn {
    display: inline-block;
    padding: .5em 1em;
    font-family: var(--font-1);
    font-size: var(--font-size-xs);
    font-weight: 700;
    background: var(--color-2);
    color: var(--color-1);
    border: .15rem solid var(--color-1);
    border-radius: 50rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.monster-category-btn:hover {
    background: var(--color-1);
    color: var(--color-2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.monster-category-btn.active,
.monster-category-btn--all {
    background: var(--color-1);
    color: var(--color-2);
}

.monster-category-btn--all:hover,
.monster-category-btn.active:hover {
    background: var(--color-5);
    border-color: var(--color-5);
}

.monster-category-btn .button-text {
    display: inline-block;
    transition: transform 0.2s ease-out;
    position: relative;
    z-index: 1;
}

/* Map Container */
#map {
    height: 70vh;
    min-height: 500px;
    border-radius: .25rem;
    border: 1px solid var(--color-3);
}

/* Bei 2-Spalten Layout - Karte füllt Container-Höhe */
.monster-map-layout #map {
    height: 100%;
    min-height: 500px;
}

/* Leaflet Popup Styling */
.leaflet-popup-content {
    font-family: var(--font-2);
    font-size: var(--font-size-xs);
}

.leaflet-popup-content a {
    color: var(--color-4);
    font-family: var(--font-1);
    text-decoration: none;
}

.leaflet-popup-content a:hover {
    color: var(--color-5);
}

.monster-thumb {
    display: block;
    max-width: 150px;
    margin-top: .5rem;
    border-radius: .25rem;
}

#monster-results-wrapper.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#monster-results-header {
    font-weight: bold;
    padding: 0.75rem 1.25rem 0.25rem;
    font-size: var(--font-size-s);
    color: var(--color-3);
}

.monster-result-excerpt {
    font-size: var(--font-size-xs) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#monster-results {
    list-style: none;
    padding: 0 1.25rem 1rem;
    margin: 0;
}

#monster-results li {
    margin: .5em 0;
}

#monster-results a {
    text-decoration: none;
    color: var(--color-3);
    transition: all .3s ease;
}

#monster-results a:hover {
    color: var(--color-1);
}

#monster-results-wrapper {
    background-color: var(--color-2);
    font-family: var(--font-1);
    margin: .5em auto;
    border-radius: .25rem;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    max-width:fit-content;
    transition: opacity 0.4s ease, transform 0.4s ease;
}


.monster-search-wrapper {
    position: relative;
    width: 240px;
    margin: auto;
    transition: width 0.6s ease;
}

/* Eingabefeld */
#monster-search {
    background-color: var(--color-2);
    border: 1px solid var(--color-3);
    color: var(--color-3);
    font-size: var(--font-size-s);
    font-family: var(--font-1);
    border-radius: 50rem;
    width: 100%;
    transition: width 0.6s ease;
    padding: 1rem 3rem 1rem 1.5rem;
}

/* Button rechts im Inputfeld */
#monster-search-button {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--color-3);
    transition: transform 0.3s ease;
}

/* Iconwechsel */
#monster-search-button::before {
    content: "🔍";
    display: inline-block;
    transition: all 0.3s ease;
}

#monster-search-button.clear::before {
    content: "✖";
}

/* === Erweiterung bei Hover, Focus oder Klick === */
.monster-search-wrapper:hover,
.monster-search-wrapper.clicked,
#monster-search:focus {
    width: 480px!important;
    max-width: 100%!important;
}

#monster-search.hover-expand {
    width: 480px !important;
    max-width: 100% !important;
}

.monster-search-wrapper.clicked {
  width: 480px!important;
  max-width: 100%!important;
}


/*h1, h2, h3, h4, h5, h6 {
	font-family:var(--font-1)!important;
}

.paragraph > .et_pb_text_inner {
        font-family: var(--font-2);
        font-size: var(--font-size-s);
        line-height: var(--line-height-s);
        font-weight: var(--font-weight-s);  
}

.dipl_ajax_search .dipl_ajax_search_field, #monster-search {
	font-size:var(--font-size-s)!important;
    font-family: var(--font-1)!important;
    border-radius: 50rem;

}
.dipl_ajax_search:focus, #monster-search:focus {
    width: 480px!important;
    max-width: 100%!important;
}
.dipl_ajax_search.clicked, #monster-search.clicked { 
    width: 480px;
    max-width: 100%;
}

.dipl_ajax_search_icon:after, #monster-search:after {
	right:2rem!important;
}
.dipl_ajax_search_item_excerpt {
	font-size:var(--font-size-xs)!important;
	white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
}
.dipl_ajax_search_item_title {
    font-size: var(--font-size-m) !important;
}

/*.dipl_ajax_search.clicked .dipl_ajax_search_icon:after {
	display:none;
}*/





#logo, #logo a {
  content:url("/wp-content/uploads/2024/12/Monster-Blech.png");
  width: clamp(4rem, 3rem + 1vw, 10rem);
  position:relative;
  z-index:9999;
  cursor:pointer;
  display:inline-block;
  transition: all .2s ease;
  height: auto;
  border-radius:50%;
  border: solid .25rem var(--color-1)

}

#logo:hover, #logo:hover a  {
  content:url("/wp-content/uploads/2024/12/Monster-Blech.png");
  transition: all .2s ease;
  animation: wobble .6s ease;
}
  .navigation:hover #logo {
        content:url("/wp-content/uploads/2024/12/Monster-Blech.png");
      transition: all .2s ease;
      align-self:center;
}

.logo-text {
    margin-left:1rem;
  font-family:var(--font-1);
    font-size:var(--font-size-s);
  font-weight:var(--font-weight-l);
  align-self:center;
}  
  
.navigation:hover {
  background-color:var(--color-2);
  transition:all .2s ease-in-out;
}

.navigation {
  
  position:sticky;
  top:0;
  align-items:center;
  background-color:transparent;
  padding:.5rem 5%;
  transition: all .2s ease-in-out;
}
 
.navigation.scrolled {
  background-color:rgba(255,255,255,.33);
  backdrop-filter: blur(40px); /* Stärke des Blur-Filters anpassen */
  transition: all .2s ease-in-out;
}

.navigation.scrolled:hover {
  transition: all .2s ease-in-out;
  background-color:var(--color-2);
}  

.navigation.scrolled #menu a {
	color:var(--color-1);    
}
  
.navigation.scrolled #logo {
   content:url("/wp-content/uploads/2024/12/Monster-Blech.png");
}  

#menu {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

#menu a {
  font-size:var(--font-size-s);
  /*font-size:1.2rem;*/
  text-decoration:none;
  font-family:var(--font-1);
  color:var(--color-1);
  display:inline-flex;
  transition: all .2s ease;
  align-items:center;
}

.navigation:hover #menu a {
    color:var(--color-3);
    transition: all .2s ease-in-out;
}

#menu a:hover {
  display:inline-flex;
  color:var(--color-1)!important;
  transition: all .2s linear;
}

#menu ul{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:clamp(1.5rem, 1.5rem + 1vw, 3rem);
}

#menu li:hover{
	transform:translateY(-2px);
  transition: all .2s ease-in-out;
}  

#menu li{
  list-style:none;
  transition: all .2s ease-in-out;
  transform:translateY(0px);
}

#burger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
}

#burger span {
  width: 1.75rem;
  height: 0.25rem;
  background-color: var(--color-3);
  border-radius: .25rem;
  transition: all 0.2s ease-in-out;
}

.navigation:hover #burger span {
  background-color:var(--color-3);
}

#burger.active span {
  background-color:var(--color-3);
}

#burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(0.5rem, .5rem);
}

#burger.active span:nth-child(2) {
display:none;
}

#burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(0.2rem, -0.2rem);
}

#menu ul.active {
  right: 0;
}
  
.social-icons{
  display:none;
}  

/**************PORTRAIT****************/
@media (orientation:portrait) {
  img#logo {
    content:url("http://impimons.uber.space/wp-content/uploads/2024/12/Monster-Blech.png");
  }
  
 #menu ul {
    position: fixed;
    top: -1rem;
    right: -125%;
    width: 100vw;
    height: 105vh;
    background-color: var(--color-2);
    display: flex;
    align-items: flex-end;
    transition: right 0.2s ease-in-out;
    z-index: 9;
    flex-direction: column;
    padding: 0 0 2rem 0;
    justify-content:flex-end;
  }
  
  .logo-text {
  	display:none;
  } 
  
  #burger {
    display: flex;
  }
  
  #menu ul li {
    margin: .25rem 2.5rem 0 0;
    top:-10%; 
    position:relative;
  }
  
  #menu a {
    font-family:var(--font-1);
    font-size:var(--font-size-xl);
    font-weight:var(--font-weight-l);
    color:var(--color-3);
    text-transform:uppercase;
  }
  
  #menu {
    justify-content:space-between;
  }
  
  .social {
    display:flex;
  }
  
  .navigation {
    padding: .5rem 2rem;
  }
  
  .social-icons, .social-icons li {
    display:flex;
    gap:clamp(.5rem, 1rem + 1vw, 1.5rem)!important;
    justify-content:center;
    align-items:center;
    margin: -5rem clamp(1rem, 1rem + 1vw, 2rem)  0 0;
    padding:2rem 0 0 0;
    transition: transform 0.2s ease;
  }
  
  .social-icons a:hover {
    transform:rotate(15deg);
  }
  
  .s-icon {
    transition: all .2s ease;
    animation: wobble .6s ease;
  }

  .s-icon:hover {
    transition: all .2s ease;
  }
 
 
}  

#nav-section {
  position: fixed;
  top: 0;
  width: 100%;
  transition: transform 0.2s ease-in-out;
}

#nav-section.hidden {
  transform: translateY(-100%);
}

#menu ul {
  transition: right 0.7s ease-in-out;
}

#menu ul.active {
  right: 0;
}

#menu ul.hidden {
  right: -110%; /* Menü verschwindet wieder */
}











.et_pb_column.dossier:nth-child(4):hover h4 {
  color: white;}


.et_pb_column.dossier {
  position: relative;  overflow: hidden;  background-color: white;  transition: background-color 0.25s ease, color 0.5s ease, transform .5s ease;  transform:translateY(0);}


/* .et_pb_column.dossier::before {
  content: "";  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-image: url('/wp-content/uploads/2024/12/IMG_7921.jpg');   background-size: cover;  background-position: center;  opacity: 0;  transition: opacity 0.5s ease;} */


.et_pb_column.dossier h4 {
  position: relative;  color: initial;  color:var(--color-3);  transition: color 0.5s ease;  z-index: 2;}


.et_pb_column.dossier:hover {
  background-color: transparent;  transform:translateY(-.5rem);}

.et_pb_column.dossier:hover::before {
  opacity: 1;}

.et_pb_column.dossier:hover h4 {
  color: var(--color-2);}


.et_pb_column.dossier::after {
  content: "";  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: linear-gradient(to bottom, rgba(22, 36, 48, 0.75), rgba(22, 36, 48, 0.9));  opacity: 0;  transition: opacity 0.5s ease;  z-index: 1;}

.et_pb_column.dossier:hover::after {
  opacity: 1;}


.et_pb_column.dossier:nth-child(4):hover h4 {
  color: white;}

 h3 {
    padding-bottom: 0px;
 }








.dsm_blob_overlay_text h3.dsm_blob_title {
  font-family: var(--font-1);  font-size:var(--font-size-l);  text-transform:uppercase;   margin-bottom:0rem;   padding-bottom:0rem;}

.dsm_blob_overlay_text .dsm_blob_description {
  font-family: var(--font-2);  font-size:var(--font-size-s);}

.dsm-entry-image .dsm-entry-thumbnail img {
  height: 250px;  object-fit: cover;}

.dsm-entry-title a{
    font-family: var(--font-1);  font-size:var(--font-size-m);  font-weight:300;  line-height:.99em;}

.dsm-readmore-wrap.et_pb_bg_layout_light {
    display: inline-flex;    align-items: center;    justify-content: center;     font-size: var(--font-size-s);    font-family: var(--font-2);    font-weight: var(--font-weight-l);    background-color: var(--color-2);    color: var(--color-3); margin-top:1rem;  border-radius: .25rem;    border: .225rem solid var(--color-3);     box-shadow: 0.1rem 0.1rem 0 0 var(--color-3),                 0.2rem 0.2rem 0 0 var(--color-3),                 0.3rem 0.3rem 0 0 var(--color-3),                 0.4rem 0.4rem 0 0 var(--color-3),                 0.5rem 0.5rem 0 0 var(--color-3);     transform: translate(0rem, 0rem);    transition: all .75s ease-out;}

.dsm-readmore-wrap.et_pb_bg_layout_light:hover {
    box-shadow: 0rem 0rem 0 0 var(--color-3);     transform: translate(0.5rem, 0.5rem);     transition: all .2s ease-in;}

a.dsm-readmore-btn.et_pb_custom_button_icon a {
  margin-top:0!important;}

.dsm-posted-on {
  font-family:var(--font-2);}

.dsm_custom_image_icon {
  max-width:2rem;}



/*Sections*/
@media (orientation: landscape) {
    .et_pb_section.hero-sec {
        padding-top: 12.5rem;
    }
}

@media only screen and (min-width:981px) and (max-width:1440px) {
    .et_pb_section.hero-sec {
        padding-top: 10rem;
    }
}

@media (orientation: portrait) {
    .et_pb_section.hero-sec {
        padding-top: 7.5rem;
    }
}



.et_pb_section.hero {
  display: none;
}
.et_pb_section.hero.active {
  display: block;
}

/* ============================================================
   MONSTER SUCHE SHORTCODE
   ============================================================ */

.monster-suche-container {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}

.monster-suche-input-wrapper {
    position: relative;
    display: block;
}

.monster-suche-input {
    width: 100%;
    padding: .75em 3em .75em 1.25em!important;
    font-family: var(--font-1);
    font-size: var(--font-size-s);
    font-weight: 700;
    border: .2rem solid var(--color-1);
    border-radius: 50rem;
    background: var(--color-2);
    color: var(--color-1);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-sizing: border-box;
}

.monster-suche-input:focus {
    outline: none;
    border-color: var(--color-5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.monster-suche-input::placeholder {
    color: var(--color-3);
    font-weight: 400;
    opacity: 0.8;
}

/* Suchicon innerhalb der Suchleiste */
.monster-suche-icon {
    position: absolute;
    right: 1.25em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-1);
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

.monster-suche-input:focus + .monster-suche-icon {
    color: var(--color-5);
}

.monster-suche-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    background: var(--color-2);
    border-radius: .25rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.monster-suche-results.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.monster-suche-item {
    display: block;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: var(--color-1);
    border-bottom: 1px solid rgba(78, 102, 113, 0.1);
    transition: all 0.2s ease;
}

.monster-suche-item:last-child {
    border-bottom: none;
}

.monster-suche-item:hover {
    background: rgba(78, 102, 113, 0.1);
    color: var(--color-5);
}

.monster-suche-item-title {
    font-family: var(--font-1);
    font-weight: 600;
    font-size: var(--font-size-s);
}

.monster-suche-no-results,
.monster-suche-error {
    padding: 1rem 1.25rem;
    text-align: center;
    font-family: var(--font-2);
    font-size: var(--font-size-xs);
    color: var(--color-3);
}

.monster-suche-error {
    color: var(--color-5);
}

/* ============================================================
   MONSTER KARUSSELL SHORTCODE
   ============================================================ */

.monster-karussell {
    position: relative;
    margin: 2rem 0;
    padding: 0 3rem;
}

.monster-karussell-track-wrapper {
    overflow: hidden;
}

.monster-karussell-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.monster-karussell-slide {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
}

/* Card Styling */
.monster-karussell-card {
    background: var(--color-2);
    border-radius: .25rem;
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.monster-karussell-card:hover {
    /* transform: translateY(-8px); */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
}

/* Image Wrapper mit Kategorie-Badge */
.monster-karussell-image-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.monster-karussell-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.monster-karussell-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.monster-karussell-image-wrapper:hover img {
    transform: scale(1.05);
}

/* Kategorie Badge oben links */
.monster-karussell-gattung {
    position: absolute;
    top: 2.5%;
    left: 2.5%;
    display: inline-block;
    font-family: var(--font-2);
    font-size: var(--font-size-xs);
    color: var(--color-2);
    background: var(--color-3);
    padding: 0.25rem 0.75rem;
    border-radius: 50rem;
    text-transform: capitalize;
    z-index: 5;
}

.monster-karussell-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.monster-karussell-title {
    font-family: var(--font-1);
    font-size: var(--font-size-m)!important;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.monster-karussell-title a {
    color: var(--color-3);
    font-size: var(--font-size-m)!important;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.monster-karussell-title a:hover {
    color: var(--color-5);
}

/* Excerpt */
.monster-karussell-excerpt {
    font-family: var(--font-2);
    font-size: var(--font-size-s);
    color: var(--color-3);
    margin: 0;
    line-height: 1.6;
    opacity: 0.8;
    flex: 1;
}

/* Zum Monster Button */
.monster-karussell-button {
    display: inline-block;
    margin-top: 1rem;
    align-self: flex-start;
}

/* Navigation Buttons */
.monster-karussell-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background: var(--color-1);
    color: var(--color-2);
    border: .2rem solid var(--color-1);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.monster-karussell-btn:hover {
    background: var(--color-5);
    border-color: var(--color-5);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.monster-karussell-btn .button-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-out;
}

.monster-karussell-prev {
    left: 0;
}

.monster-karussell-next {
    right: 0;
}

.monster-karussell-empty {
    text-align: center;
    font-family: var(--font-2);
    font-size: var(--font-size-s);
    color: var(--color-3);
    padding: 2rem;
}

/* Responsive Karussell */

/* Mobile: Volle Breite, Buttons unten */
@media (max-width: 767px) {
    .monster-karussell {
        padding: 0;
        padding-bottom: 3.5rem; /* Platz für Buttons unten */
    }

    .monster-karussell-track {
        gap: 0; /* Kein Gap auf Mobile */
    }

    .monster-karussell-slide {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .monster-karussell-btn {
        top: auto;
        bottom: 0;
        transform: none;
        width: 2.5rem;
        height: 2.5rem;
    }

    .monster-karussell-prev {
        left: calc(50% - 3rem);
    }

    .monster-karussell-next {
        right: calc(50% - 3rem);
    }
}

/* Tablet: 2 Slides nebeneinander (1 gap = 1.5rem) */
@media (min-width: 768px) {
    .monster-karussell-slide {
        flex: 0 0 calc((100% - 1.5rem) / 2);
        min-width: calc((100% - 1.5rem) / 2);
    }
}

/* Desktop: 3 Slides nebeneinander (2 gaps = 3rem) */
@media (min-width: 1200px) {
    .monster-karussell-slide {
        flex: 0 0 calc((100% - 3rem) / 3);
        min-width: calc((100% - 3rem) / 3);
    }
}

/* ============================================================
   CONTACT FORM 7 BUTTONS
   ============================================================ */

.wpcf7-submit {
    display: inline-block;
    padding: .75em 1.25em;
    font-family: var(--font-1);
    font-size: var(--font-size-s);
    font-weight: 700;
    background: var(--color-1);
    color: var(--color-2);
    border: .2rem solid var(--color-1);
    border-radius: 50rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.wpcf7-submit:hover {
    background: var(--color-5);
    border-color: var(--color-5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Alternative: Ghost Button Style für CF7 */
.wpcf7-form.ghost-button .wpcf7-submit {
    background: var(--color-2);
    color: var(--color-1);
}

.wpcf7-form.ghost-button .wpcf7-submit:hover {
    background: var(--color-1);
    color: var(--color-2);
}


/************************************************************************************
/************************************************************************************
TIMELINE
/************************************************************************************
/************************************************************************************/

/* Timeline Container */
.um-timeline {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Vertikale Linie in der Mitte (Desktop) - geschlängelt */
.um-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 20px;
    height: var(--timeline-line-height, 0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40'%3E%3Cpath d='M10 0 Q0 10 10 20 Q20 30 10 40' stroke='%23ab2328' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: center;
    transition: height 0.1s linear;
}

/* Timeline Item */
.um-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.um-timeline-item.um-timeline-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Dot auf der Linie - vertikal zentriert */
.um-timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 1rem;
    height: 1rem;
    background: var(--color-3);
    border: 3px solid var(--color-2);
    border-radius: 50%;
    z-index: 2;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease,
                background 0.3s ease;
}

/* Dot wird sichtbar wenn Item in View */
.um-timeline-item.um-timeline-visible .um-timeline-dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Dot pulsiert wenn Linie durchgeht */
.um-timeline-dot.pulse {
    background: var(--color-5);
    animation: dot-pulse 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Starke Puls-Animation für Dots */
@keyframes dot-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 var(--color-5);
    }
    15% {
        transform: translate(-50%, -50%) scale(1.8);
        box-shadow: 0 0 0 0 var(--color-5);
    }
    30% {
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 0 0 0 10px rgba(199, 81, 71, 0.4);
    }
    45% {
        transform: translate(-50%, -50%) scale(1.6);
        box-shadow: 0 0 0 20px rgba(199, 81, 71, 0.2);
    }
    60% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 0 30px rgba(199, 81, 71, 0);
    }
    75% {
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 transparent;
    }
}

/* Content Container */
.um-timeline-content {
    display: contents;
}

/* Text-Wrapper Hintergrund */
.um-timeline-text-wrapper {
    background-repeat: no-repeat;
    background-blend-mode: hard-light;
    background-image: url(http://impimons.uber.space/wp-content/uploads/2024/12/AdobeStock_358608321.jpg);
    background-color: #4e6671;
    background-size: cover;
    padding: 1.5rem 2rem;
    border-radius: .25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;

    align-self: center;
    height: max-content;
}

/* Desktop: Abwechselndes Layout */
/* Links = Text links, Bild rechts */
.um-timeline-item.um-timeline-left .um-timeline-text-wrapper {
    grid-column: 1;
    grid-row: 1;
}

.um-timeline-item.um-timeline-left .um-timeline-image {
    grid-column: 2;
    grid-row: 1;
    padding-left: 2rem;
}

/* Rechts = Bild links, Text rechts */
.um-timeline-item.um-timeline-right .um-timeline-text-wrapper {
    grid-column: 2;
    grid-row: 1;
}

.um-timeline-item.um-timeline-right .um-timeline-image {
    grid-column: 1;
    grid-row: 1;
    padding-right: 2rem;
}

/* Image Styling */
.um-timeline-image {
    overflow: hidden;
    border-radius: .25rem;
}

.um-timeline-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: .25rem;
    transition: transform 0.5s ease;
}

.um-timeline-item:hover .um-timeline-image img {
    transform: scale(1.03);
}

/* Text Styling */
.um-timeline-text-wrapper h3 {
    font-family: var(--font-1);
    font-size: var(--font-size-l);
    font-weight: 700;
    color: var(--color-1);
    margin: 0 0 1rem;
    line-height: 1.2;
}

/* Schritt-Label über der Headline */
.um-timeline-step {
    display: block;
    font-family: var(--font-2);
    font-size: var(--font-size-s);
    font-weight: 600;
    color: var(--color-7);
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.um-timeline-text {
    font-family: var(--font-2);
    font-size: var(--font-size-s);
    line-height: 1.7;
    color: var(--color-1);
}

.um-timeline-text p {
    margin: 0 0 1rem;
}

.um-timeline-text p:last-child {
    margin-bottom: 0;
}

/* Collapsed Text */
.um-timeline-text.is-collapsed {
    max-height: 120px;
    overflow: hidden;
    position: relative;
}

.um-timeline-text.is-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, #4e6671);
}

.um-timeline-text.is-expanded {
    max-height: none;
}

/* Toggle Button */
.um-timeline-toggle {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: var(--font-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-1);
    cursor: pointer;
    transition: color 0.3s ease;
    text-decoration: underline;
}

.um-timeline-toggle:hover {
    color: var(--color-2);
}

/* Empty State */
.um-timeline-empty {
    text-align: center;
    padding: 3rem;
    color: var(--color-3);
    font-style: italic;
}

/* ============================================================
   MOBILE: Bild über Text, Linie rechts
   ============================================================ */
@media (max-width: 768px) {
    /* Linie: 20px breit, Zentrum bei 1.5rem vom rechten Rand */
    .um-timeline::before {
        left: auto;
        right: calc(1.5rem - 10px); /* 10px = halbe Linienbreite */
        transform: none;
    }

    .um-timeline-item {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding-left: 0;
        padding-right: 3.5rem;
        margin-bottom: 3rem;
    }

    /* Dot: 1rem breit, Zentrum bei 1.5rem vom rechten Rand */
    .um-timeline-dot {
        left: auto;
        right: calc(1.5rem - 0.5rem); /* 0.5rem = halbe Dot-Breite */
        top: 0.5rem;
        transform: scale(0);
    }

    .um-timeline-item.um-timeline-visible .um-timeline-dot {
        transform: scale(1);
    }

    .um-timeline-dot.pulse {
        animation: dot-pulse-mobile 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    }

    /* Mobile: Immer Bild zuerst, dann Text */
    .um-timeline-item.um-timeline-left .um-timeline-image,
    .um-timeline-item.um-timeline-right .um-timeline-image {
        order: 1;
        padding: 0;
    }

    .um-timeline-item.um-timeline-left .um-timeline-text-wrapper,
    .um-timeline-item.um-timeline-right .um-timeline-text-wrapper {
        order: 2;
        text-align: center;
    }
}

/* Mobile Puls-Animation (ohne translate) */
@keyframes dot-pulse-mobile {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--color-5);
    }
    15% {
        transform: scale(1.8);
        box-shadow: 0 0 0 0 var(--color-5);
    }
    30% {
        transform: scale(1.2);
        box-shadow: 0 0 0 10px rgba(199, 81, 71, 0.4);
    }
    50% {
        transform: scale(1.4);
        box-shadow: 0 0 0 20px rgba(199, 81, 71, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(199, 81, 71, 0);
    }
}

/************************************************************************************/