@font-face {
    font-family: 'Barmeno';
    src: url('fonts/Barmeno.eot');
    src: url('fonts/Barmeno.eot?#iefix') format('embedded-opentype'),
        url('fonts/Barmeno.woff2') format('woff2'),
        url('fonts/Barmeno.woff') format('woff'),
        url('fonts/Barmeno.ttf') format('truetype'),
        url('fonts/Barmeno.svg#Barmeno') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barmeno Bold';
    src: url('fonts/Barmeno-Bold.eot');
    src: url('fonts/Barmeno-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Barmeno-Bold.woff2') format('woff2'),
        url('fonts/Barmeno-Bold.woff') format('woff'),
        url('fonts/Barmeno-Bold.ttf') format('truetype'),
        url('fonts/Barmeno-Bold.svg#Barmeno-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}




/* VARIABLEN */

:root {

  /* TYPO */

  --mengentext: 'Barmeno';
  --bold: 'Barmeno Bold';

  --font18: 18px;
  --font20: 20px;
  --font22: 22px;
  --font36: 36px;
  --font46: 46px;


/* COLOR */

  --rot: #B52323;
  --dunkelrot: #992523;
  --weiss: #ffffff;
  --dunkel: #152732;
  --orange: #FF7400;

  --redGradient: linear-gradient(180deg, rgba(202,34,40,1) 0%, rgba(153,37,35,1) 100%);


  /* SHADOW */

  --text-schatten: 1px 1px 5px rgba(0,0,0,0.6);
}


body {
  font-family: var(--mengentext);
  font-size: var(--font20);
}

h1, h2, h3, b, strong {
  font-family: var(--bold);
}

h1 span, h2 span, h3 span {
  color: var(--rot);
}

h1 {
  font-size: var(--font46);
}


h2 {
  font-size: var(--font36);
}


h3 {
  font-size: var(--font22);
}

.sppb-column-addons a,
ul li a {
  color: var(--dunkel);
}

#pm__redGradient h2 span {
  color: var(--weiss);
}


/* HEADER ################################# */

header#sp-header {
  background: var(--redGradient);
}

/* END HEADER ############################# */

/* NAVIGATION ############################# */

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
  font-size: var(--font20);
  color: var(--weiss);
  text-transform: uppercase;
}


#sp-menu > div > nav > ul > li.sp-menu-item.sp-has-child.active,
.sp-megamenu-parent>li>a:hover,
.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
  background-color: var(--dunkelrot);
  color: var(--weiss);
  font-weight: 900;
}

.sp-megamenu-parent>li:last-child>a {
    padding: 0px 15px;
}

/* DROPDOWN */

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a, 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
  font-size: var(--font18);
  line-height: 140%;
}

/* END NAVIGATION ######################### */

/* LEISTUNG AUF STARTSEITE ################ */

#mp__leistungsSection .sppb-row-column {
  margin-bottom: 30px;
}

#mp__leistungsSection h4.sppb-addon-title,
#mp__leistungsSection .sppb-addon-subtitle {
  text-shadow: var(--text-schatten);
}

/* END LEISTUNG AUF STARTSEITE ############ */

/* KONTAKT FLIPBOXEN ###################### */

.sppb-flipbox-panel .flip-box {
  justify-content: flex-end;
  color: var(--dunkel);
}

/* END KONTAKT FLIPBOXEN ################## */

/* GALERIE ################################ */

ul.osgalery-cat-tabs {
  display: none;
}

/* END GALERIE ############################ */

/* CONVERTFORMS ########################### */

#cf_1, #cf_2 {
  padding: 30px;
  background-color: var(--dunkelrot);
}

#cf_1 label.cf-label,
#cf_2 label.cf-label,
#cf_2 h2 {
  color: var(--weiss);
  font-size: var(--font22);
  font-family: var(--bold);
  }

.cf-radio-group label.cf-label,
.cf-control-input label.cf-label {
  font-family: var(--mengentext)!important;
}

#cf_1 a, #cf_2 a {
  color: #fff;
  text-decoration: underline;
}

#cf_1 a:hover, #cf_2 a:hover {
  text-decoration: none;
}

#cf_1 p,
#cf_1 .cf-control-input-desc,
#cf_2 p,
#cf_2 .cf-control-input-desc {
  color: var(--weiss);
  font-size: var(--font20);
  line-height: 150%!important;
}

input[type="text"]:not(.form-control), input[type="email"]:not(.form-control), input[type="url"]:not(.form-control), input[type="date"]:not(.form-control), input[type="password"]:not(.form-control), input[type="search"]:not(.form-control), input[type="tel"]:not(.form-control), input[type="number"]:not(.form-control), select:not(.form-select):not(.form-control) {
  border-radius: 0;
  font-size: var(--font20);
}

/* END CONVERTFORMS ####################### */





/* MEDIA QUERIES */


@media screen and (min-width: 577px) and (max-width: 767px) {

#cf_1 label.cf-label,
#cf_2 label.cf-label,
#cf_2 h2 {
  color: var(--weiss);
  font-size: var(--font20);
  font-family: var(--bold);
  }


}

@media (max-width: 576px) { 
  
body {
  font-size: var(--font18);
}


body {
  font-family: var(--mengentext);
  font-size: var(--font18);
}

#sp-header {
    height: 60px;
}

h1.sppb-addon-title {
  font-size: var(--font36);
  }

}


/* MENU ---------------------------------------------- */

.offcanvas-overlay {
    background: rgba(227, 0, 15, 0.5);
}

#offcanvas-toggler {
    background-color:var(--orange);
    transform: translateY(-25%);
    top: 29%;
    width: 49px;
    height: 49px;
    margin-top: 17px;
    margin-left: 0!important;
}

#offcanvas-toggler:hover {
    background-color: var(--weiss)!important;
}

.burger-icon {
    width: 25px;
    cursor: pointer;
    top: 12px;
    position: absolute;
    left: 13px;
}




body.ltr .close-offcanvas {
    width: 49px;
    height: 49px;
    background-color: #fff;
}

.offcanvas-active .burger-icon>span {
    background-color: var(--weiss);
}

#offcanvas-toggler > div > span,
#offcanvas-toggler.active .burger-icon>span {
    background-color: var(--weiss);
}

#offcanvas-toggler > div > span:nth-child(2) {
    max-width: 100%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(2) {
    max-width: 70%;
    transition: .3s;
}

#offcanvas-toggler > div > span:nth-child(3) {
    max-width: 70%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(3) {
    max-width: 50%;
    transition: .3s;
}

.offcanvas-menu {
    background-color: var(--orange);
    border-left: 3px solid #ffffff;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a, 
.offcanvas-menu .offcanvas-inner ul.menu>li>span {
    color: #fff!important;
    opacity: 1!important;
    text-transform: uppercase;
    padding-bottom: 15px;
    font-size: 24px;
    text-decoration: none;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a.hm__linkNone {
    display: none;
}

/* HOVER des Links +++++++++++++++++++ */

ul.menu.nav-pills li {
  position: relative;
  overflow: hidden;
}

ul.menu.nav-pills li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: white;
  transition: width 0.3s ease; /* Geschwindigkeit und Ãœbergangseffekt anpassen */
}

ul.menu.nav-pills li:hover::after {
  width: 100%;
}

/* END +++++++++++++++++++++++++++++++ */

.offcanvas-menu .offcanvas-inner ul.menu li.active a {
    color: #fff!important;
}


ul.menu.nav-pills li.current.active.menu-deeper.menu-parent > a span.menu-toggler,
ul.menu.nav-pills li.menu-deeper.menu-parent > a span.menu-toggler {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 100%;
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler:after,
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler:after {
    display: none;
}

body > div.offcanvas-menu > div.offcanvas-inner > div.sp-module > div > ul > li.menu-deeper.menu-parent.menu-parent-open > ul > li > a {
    font-size: 20px;
}

.social-media img.icon {
    width: 35px;
    height: 35px;
    transition: .3s;
}

.social-media img.icon:hover {
    scale: 1.3;
    transition: .3s;
}

/* END MENU ------------------------------------------------ */