/*	Author: Sascha Milivojevic (info@hey-sascha.de):
   
		------------------------------------------------------
   
		PHAESUN v1 stylesheet
  
		----------------------------------------------------*/
		
/*	CSS Imports
  
		----------------------------------------------------
*/

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #000;
    color: #FFF;
    text-shadow: none;
}

::selection {
    color: #FFF;
    background: #000;
    text-shadow: none;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;}
    
div img, figure img {
  max-width: 100%;
  width: auto\9; /* ie8 */} 

 
/* ==========================================================================
   VARIABLES
   ========================================================================== */
:root {
  --font-family: 'ITC AvantGarde Gothic';
  --weiss: #E1DFDA;
  --schwarz: #2C2E30;
  --grau: #E1DFDA; /* 225, 223, 218 */
  --con1: #4879FF; /* 255, 172, 129*/
  --con2: #E4593F; /* 254, 195, 166 */
  --con3: #E26EC8; /* 239, 233, 174 */
  --con4: #D18151; /* 205, 234, 192 */
}

.bg-weiss, .bg-schwarz footer .bg-schwarz { background-color: var( --weiss); }
.bg-grau { background-color: var( --grau); }
.bg-transgrau { background: rgba(225, 223, 218, 0.0); }
.bg-schwarz, .bg-schwarz footer.bg-grau { background-color: var( --schwarz); }
.bg-transschwarz { background: rgba(44, 46, 48, 0.0);}
.bg-con1 { background-color: var( --con1); }
.bg-con2 { background-color: var( --con2); }
.bg-con3 { background-color: var( --con3); }
.bg-con4 { background-color: var( --con4); }
.border-top { border-top: 2px solid var(--schwarz)}
.border-bottom { border-bottom: 2px solid var(--schwarz)}
.border-right { border-right: 2px solid var(--schwarz)}
.border-left { border-left: 2px solid var(--schwarz)}

.bg-schwarz .border-top, 
.bg-schwarz.border-top,
.color-white .border-top, 
.color-white.border-top { border-top: 2px solid var(--weiss)}
.bg-schwarz .border-bottom, 
.bg-schwarz.border-bottom,
.color-white .border-bottom, 
.color-white.border-bottom  { border-bottom: 2px solid var(--weiss)}
.bg-schwarz .border-right, 
.bg-schwarz.border-right,
.color-white .border-right, 
.color-white.border-right { border-right: 2px solid var(--weiss)}
.bg-schwarz .border-left, 
.bg-schwarz.border-left,
.color-white .border-left, 
.color-white.border-left { border-left: 2px solid var(--weiss)}

.bg-schwarz .bg-transgrau .border-left { border-left: 2px solid var(--schwarz);}
.bg-schwarz .bg-transgrau .border-right { border-right: 2px solid var(--schwarz);}
.bg-schwarz .bg-transgrau .border-top { border-top: 2px solid var(--schwarz);}
.bg-schwarz .bg-transgrau .border-bottom { border-bottom: 2px solid var(--schwarz); }
/* ==========================================================================
   Flex Layout
   ========================================================================== */
.flex-row, .flex-column, .flex-row-reverse, .flex-column-reverse { display: flex; flex-wrap: wrap;}   
.flex-row { flex-direction: row; }
.flex-row-reverse  { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }


/* 
 justify-content
 This defines the alignment along the main axis. -> horizontal zueinander
 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
*/
.j-center { justify-content: center; }
.j-start { justify-content: flex-start; }
.j-end { justify-content: flex-end; }
.j-between { justify-content: space-between; }
.j-evenly { justify-content: space-evenly; }
.j-around { justify-content: space-around; }

/*
This defines the default behavior for how flex items are laid out along the cross axis on the current line. -> zueinander in der gleichen Zeile/Spalte bei unterschiedlicher Containerhöhe
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline 
*/

.ai-stretch { align-items: stretch; }
.ai-center { align-items: center; }
.ai-start { align-items: flex-start; }
.ai-end { align-items: flex-end; }
.ai-baseline { align-items: baseline; }

/* 
 align-content
This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline 
*/
.ac-stretch { align-content: stretch; }
.ac-center { align-content: center; }
.ac-start { align-content: flex-start; }
.ac-end { align-content: flex-end; }
.ac-baseline { align-content: baseline; }
.ac-between { align-content: space-between; }
.ac-evenly { align-content: space-evenly; }
.ac-around { align-content: space-around; }
.wrapper { width: calc(100% - 60px); max-width: 1980px; padding: 0 15px; margin: 0 30px;}
.keep-down { position: absolute; bottom: 20px; left: 0px;}

.wrapper2 { width: calc(100% - 60px); max-width: 1980px; padding: 0; margin: 0 30px; }
.wrapper2 .w30, .wrapper2 .w60, .wrapper2 .w40, .wrapper2 .w50, .wrapper2 .w70  { padding: 5px 20px;}
.wrapper2 .w70 h3 { padding-left: 20px; padding-right: 20px; }
.pure-text .wrapper2 .w70 h3 { padding-left: 0px; padding-right: 0px; } 
.pure-text .wrapper2 .w70 { padding: 5px 20px; }
.button-wrapper { margin: 10px;}
.button-wrapper2 { margin: 0 0 10px 0;}
.w100 { width: 100%;}
.w80 { width: 80%;}
.w70 { width: 70%;}
.w50, .w5050 { width: 50%; }
.w60 { width: 60%;   }
.w40 { width: 40%; }
footer .w40 { padding-top: 10px;}
.w30 { width: 30%;  }


figure { padding: 0; margin: 0 auto 20px auto;}
figcaption { padding-top: 5px; margin: 0; }

@media screen and (max-width: 1380px) {
.wrapper, .textWrap { padding: 0 15px;}
.button-wrapper { margin: 10px;}
.wrapper.abstand { padding: 60px 10px 0 10px;}
.w70 { width: 65%;}
.w50 > .w70 { width: 80%;}
.w30 { width: 35%;}
.startscreen .w30 { width: 40%; }
.startscreen .w70 { width: 60%; }
}
@media screen and (max-width: 1023px) {
.wrapper { width: 100%; padding: 0 10px; margin: 0 10px;}
.button-wrapper { margin: 15px;}
.wrapper2 { width: 100%; margin: 0 10px;}
.wrapper2 .w30, .wrapper2 .w60, .wrapper2 .w40, .wrapper2 .w50  { padding: 5px 10px;}
.wrapper2 .w70 h3 { padding-left: 10px; padding-right: 10px; }
.wrapper.abstand { padding: 40px 10px 0 10px;}
.w60 { width: 55%; }
.w40 { width: 45%;}
.w70 { width: 60%;}
.w30 { width: 40%;}
.startscreen .w30 { width: 60%; }
.startscreen .w70 { width: 40%; }
.logoslider .w30.border-left { border-left: none; }
.logoslider .w70.border-right {  border-right: none;}
.logoslider .w70, .logoslider .w30 { width: 100% !important; }
}

@media screen and (max-width: 820px) {
.w50, .w5050 { width: 70%; }
.accordion .w50, .accordion .w5050 { width: 100% !important; }
.accordion .w50 { /* border-bottom: 2px solid var(--schwarz); */}
.w50.border-right, .faq .w60.border-right, .pure-text .wrapper2 .w30 { border-right: none;}
.w70 { width: 85%;}
.logoslider .w70 { width: 100%;}
.logoslider .w70 h3, .w50.border-right h3 { padding-bottom: 10px;}
.w60 { width: 80%; }
.w40 { width: 60%; }
.w30 { width: 50%; }
.startscreen .w30, .logoslider .w30, .startscreen .w70 { width: 100%; }
.startscreen .w30.border-right { border-right: none; }
.logoslider .button-wrapper, .tabs-carousel .button-wrapper, .product-slider .button-wrapper { margin: 50px 0 20px 0;}
}
@media screen and (max-width: 580px) {
.w50, .w60, .w40, .w30, .w70, .w5050 { width: 100%; }
.startscreen .w30, .logoslider .w30 { width: 90%; }
}
@media screen and (max-width: 340px) { 
.wrapper { width: 100%; padding: 0 4px; margin: 0 4px;}
.wrapper2 { margin: 0 4px;}
.button-wrapper { margin: 8px;}
.wrapper.abstand { padding: 40px 8px 0 8px;}
.wrapper2 .w30, .wrapper2 .w60, .wrapper2 .w40, .wrapper2 .w50  { padding: 5px 4px;}
.wrapper2 .w70 h3 { padding-left: 8px; padding-right: 8px; }
}

/* ==========================================================================
    GRID LAYOUT
   ========================================================================== */
.grid-2columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 40px;
    z-index: 2;} 
.tab2.grid-2columns { 
    width: 100%;
    grid-row-gap: 0px;
}   
.grid-3columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    z-index: 2;} 
.tab.grid-3columns {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.grid-4columns { 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 10px;}
.grid-4columns-masonry { 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: masonry; 
    grid-column-gap: 40px;
    grid-row-gap: 60px;}
.grid-6columns { 
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;} 

/*
.grid-item::before, 
.grid-item::after {
   content: '';
   position: absolute;
   background-color: #333;
   z-index: 1;
}
.grid-item::after {
  width: 100vw;
  height: 1px;
  left: 0;
  top: 0;
}
.grid-item::before {
  width: 1px;
  height: 100vh;
  left: 0;
  top: 0;
}
*/


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

}
@media screen and (max-width: 1023px) {
.grid-4columns-masonry, .grid-4columns { grid-template-columns: repeat(3, 1fr); }
}    
@media screen and (max-width: 820px) { 
.tab.grid-3columns, .tab2.grid-2columns { grid-template-columns: repeat(1, 1fr); width: 50%;}
.grid-2columns, .grid-4columns-masonry, .grid-4columns { grid-template-columns: repeat(1, 1fr); }
.grid-2columns  .grid-item, .grid-3columns  .grid-item, .grid-4columns-masonry, .grid-4columns { max-width: 580px; margin: 0 auto;} 
}   
@media screen and (max-width: 650px) { 
.carousel-tabs2 .grid-3columns { grid-template-columns: repeat(2, 1fr); } 
}
/* ==========================================================================
   HTML BODY BASICS
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;}
/* 
@media screen and (max-width: 780px) {
html, body {
  position: relative;
  overflow-x:hidden;}
}

@supports (-webkit-overflow-scrolling: touch) {
html, body {
  position: relative;
  overflow-x:hidden;} 
}
*/  
body {
    overflow-x: hidden; 
    font-family: var(--font-family);
    font-weight: normal;
    color: var(--schwarz); } 
input {  font-family: var(--font-family-regular);}
h1, h3, h4, h5, h6, strong { font-family: var(--font-family);}
i, em, q, blockquote, cite, button, input { font-family: var(--font-family);}
/* ==========================================================================
   FONT COLORS
   ========================================================================== */
p, h1, h2, h3, h4, h5, h6, .bg-schwarz footer .bg-schwarz { color: var( --schwarz); }
.bg-con1 p, .bg-con1 h1, .bg-con1 h2, .bg-con1 h3, .bg-con1 h4, .bg-con1 h5, .bg-con1 h6,
.bg-con2 p, .bg-con2 h1, .bg-con2 h2, .bg-con2 h3, .bg-con2 h4, .bg-con2 h5, .bg-con2 h6,
.bg-con3 p, .bg-con3 h1, .bg-con3 h2, .bg-con3 h3, .bg-con3 h4, .bg-con3 h5, .bg-con3 h6,
.bg-con4 p, .bg-con4 h1, .bg-con4 h2, .bg-con4 h3, .bg-con4 h4, .bg-con4 h5, .bg-con4 h6,
.bg-schwarz p, .bg-schwarz h1, .bg-schwarz h2, .bg-schwarz h3, .bg-schwarz h4, .bg-schwarz h5, .bg-schwarz h6, .bg-schwarz li,
.color-white p, .color-white h1, .color-white h2, .color-white h3, .color-white h4, .color-white h5, .color-white h6, .color-white li { color: var(--weiss) !important;}
a { color: var(--schwarz); cursor: pointer;}
.bg-schwarz .bg-transgrau p, .bg-schwarz .bg-transgrau h1, .bg-schwarz .bg-transgrau h3 { color: var(--schwarz) !important; }
/* ==========================================================================
   LINK BASICS
   ========================================================================== */    
p a, ul li a { color: var(--schwarz); text-decoration: none; }
.bg-schwarz p a, .bg-schwarz ul li a, .color-white p a, .color-white ul li a { color: var(--weiss);  }
.bg-schwarz .bg-grau ul li a, .bg-schwarz .bg-grau ul li { color: var(--schwarz) !important;  }
.bg-schwarz footer.bg-grau ul li a, .bg-schwarz footer.bg-grau ul li { color: var(--weiss) !important;  }
a.button2 {
display: inline-block;
padding: 10px 55px 5px 10px;
color: var(--weiss);
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
a.button {
display: inline-block;
padding: 15px 15px 5px 15px;
color: var(--weiss);
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease-in-out;
-webkit-box-shadow: 14px 11px 4px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 14px 11px 4px 0px rgba(0,0,0,0.1);
box-shadow: 14px 11px 4px 0px rgba(0,0,0,0.1);
}

@media (hover: hover) {
a.button:hover {
padding: 14px 14px 4px 14px;
-webkit-box-shadow: 14px 11px 4px -4px rgba(0,0,0,0.1);
-moz-box-shadow: 14px 11px 4px -4px rgba(0,0,0,0.1);
box-shadow: 14px 11px 4px -4px rgba(0,0,0,0.1); }
a.button2:hover { padding: 10px 50px 5px 25px; }
}

@media screen and (max-width: 580px) { 
a.button { padding: 20px 15px 10px 15px; }
}
/* ==========================================================================
   FONT SIZES
   ========================================================================== */
h1, h3, h4, h5, h6 { font-family: var(--font-family);  }   
h1, a.button, a.button2, h3, h5 { -moz-font-feature-settings: "ss01"; -webkit-font-feature-settings: "ss01"; font-feature-settings: "ss01";}
h1, h2, h3, h4, h5, h6, p { margin-top: 0;}
h1 {  line-height: 1.15em;  padding: 80px 0; margin: 0; text-transform:uppercase;  text-align: left; letter-spacing: -0.08em; }
h2 {  line-height: 1.15em; font-weight: 700; text-transform:uppercase; padding: 40px 0; margin: 0; text-align: left; letter-spacing: -0.08em;}
.double-headline-block h2 { padding: 40px 0 0 0; }
.double-headline-block h3 { padding: 0 0 80px 0; }
h3 { width: 100%; }
h3, .accordion-btn .title, h4 { line-height: 1.25em;  margin: 0; padding: 30px 0; font-weight: 500; }
h5 { text-transform: uppercase; font-weight: 400;}
.wrapper ul { padding: 0; margin: 0 0 0 30px; }
ul li {
    list-style-type: ">";
    list-style-position: outside;
    padding-left: 5px; }

p, label, .wrapper li, .wrapper div, .wrapper2 div, h5 { font-size: 20px; line-height: 1.45em; }
p { margin: 15px 0;}
figcaption { font-size: 12px; line-height: 14px;}
@media screen and (min-width: 1380px) { 
p { max-width: 720px; }
}
@media screen and (min-width: 1580px) { 
p, label, .wrapper li, .wrapper div, .wrapper2 div, h5 { font-size: 22px; }
h1 { font-size: 125px;}
h2 { font-size: 80px;}
h3, h4, .accordion-btn .title, .faq .accordion-btn, .accordion-btn2, .button-wrapper a { font-size: 34px;}
}
@media screen and (min-width: 1820px) {
p, label, .wrapper li, .wrapper div, .wrapper2 div, h5 { font-size: 25px; }
h1 { font-size: 146px; }
h2 { font-size: 80px;}
h3, h4, .accordion-btn .title, .faq .accordion-btn, .accordion-btn2, .button-wrapper a { font-size: 37px;}
}
@media screen and (max-width: 1579px) { 
h1 { font-size: 106px; }
h2 { font-size: 70px;}
h3, h4, .accordion-btn .title, .faq .accordion-btn, .accordion-btn2, .button-wrapper a { font-size: 34px;}
}
@media screen and (max-width: 1379px) { 
h1 { font-size: 90px; padding: 60px 0;}
h2 { font-size: 60px;}
h3, h4, .accordion-btn .title, .faq .accordion-btn, .accordion-btn2, .button-wrapper a { font-size: 30px;}
.double-headline-block h3 { padding: 0 0 60px 0; }
}
@media screen and (max-width: 1155px) { 
h1 { font-size: 65px;padding: 50px 0; }
h2 { font-size: 50px;}
h3, h4, .accordion-btn .title, .button-wrapper { font-size: 25px; padding: 25px 0;}
.faq .accordion-btn, .accordion-btn2, .button-wrapper a { font-size: 25px; }
.double-headline-block h3 { padding: 0 0 45px 0; }
}
@media screen and (max-width: 580px) { 
h1 { font-size: 40px; padding: 30px 0;}
h2 { font-size: 30px; padding: 20px 0;}
h3, h4, .accordion-btn .title { font-size: 22px; padding: 20px 0;}
.faq .w40 h3 { padding-bottom: 0;}
.faq .accordion-btn2, .button-wrapper a { font-size: 22px; }
p, label, .wrapper li, .wrapper div, .wrapper2 div, h5 { font-size: 18px; line-height: 1.45em; }
.double-headline-block h3 { padding: 0 0 35px 0; }
}
@media screen and (max-width: 380px) { 
h1 { font-size: 38px; }
.double-headline-block h3 { padding: 0 0 30px 0; }
}
/* ==========================================================================
   NAVIGATION
   ========================================================================== */
/*
nav.mainNav { 
    z-index: 55;
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    height: calc(80vh - 100px);
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: transform .25s .1s ease-in-out;
}
nav.expanded {
    display: flex;
    opacity: 1;
    visibility: visible;
 }
*/
nav { padding-top: 20px; }
nav .wrapper > ul { width: 100% !important; }
nav ul { 
    width: auto; 
    padding: 0 !important; 
    margin: 0 !important;
}

nav ul > li { 
    font-family: var(--font-family-bold);
    font-size: 21px !important; 
    line-height: 21px !important;
    list-style: none !important;
    padding: 0 30px; } 
nav ul > li:last-child { padding-right: 0; border-right: none;}
nav ul > li a { text-decoration: none; text-transform: uppercase;}    
nav ul > li a.active, nav ul > li.active a, nav ul > li.parent a { font-weight: 500; }
@media screen and (max-width: 1280px) { 
nav ul > li { padding: 0 20px; font-size: 20px !important; line-height: 20px !important;}
}
@media screen and (max-width: 1023px) { 
nav ul > li { padding: 0 15px; font-size: 19px !important; line-height: 19px !important;}
} 
@media screen and (max-width: 820px) {
nav ul > li { border-right: none; width: 100%; margin: 4px 0; text-align: right; padding-right: 0; font-size: 18px !important; line-height: 18px !important;}
nav { padding: 10px; }
}

/* ==========================================================================
    HEADER
   ========================================================================== */
.topbar {
    z-index: 99;
    width: 100%;
    height: 150px;
    position: fixed;
     top:0;
     right:0;
     left:0;
     transition: transform .25s .1s ease-in-out;
     background: rgba(225, 223, 218, 0.0);}
.topbar.color-white { background: rgba(44, 46, 48, 0.0);}
.down .topbar { transform: translate3d(0, -150px, 0); }
.topbar.noopa { background: rgba(225, 223, 218, 1); }
.topbar.color-white.noopa { background: var(--schwarz); }
.topbar .logo { width: 165px; padding-right: 0px; }
.spacer { width: 100%; height: 150px;}
@media screen and (max-width: 1023px) { 
.topbar .logo { width: 150px; padding-right: 0px; }
} 
@media screen and (max-width: 820px) { 
.topbar .first, .topbar .second { width: 50%; }    
}
/* ==========================================================================
   SECTIONS
   ========================================================================== */
section  { width: 100%; padding: 0 0 75px 0; margin-bottom: 75px; /*min-height: calc(100vh - 150px);*/}
section.startscreen {  padding: 0; position:relative; margin 0; }
section.startscreen .w100 {min-height: calc(100vh - 150px);} 
.paddbott { padding-bottom: 150px;}    
@media screen and (max-width: 1280px) { }
@media screen and (max-width: 580px) {  }

@media screen and (max-width: 1023px) { 
section  { padding: 0 0 35px 0; margin-bottom: 35px;}
section.startscreen {  padding: 0; } 
}

.empty { height: 80vh; width: 100%;}
.empty img{
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center center;}  
/* ==========================================================================
    HEADER BG
   ========================================================================== */   

.hero {   
    position: absolute;
    top: -150px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: calc(100% + 150px);}        
.slidebg {
    width: 100%;
    height: 100%; 
    overflow:hidden;}
.slidebg .item span{ 
    width: 100%; 
    height: calc(100% + 150px);
    position: absolute;
      top: -150px;
      left: 0px;
      color: transparent;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: none;
      opacity: 0;
      z-index: 0;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
        animation: imageAnimation 24s linear infinite 0s;   } 
.slidebg div:nth-child(1) span { 

}
.slidebg div:nth-child(2) span { 

  animation-delay: 8s;
}
.slidebg div:nth-child(3) span { 
  animation-delay: 16s;
}
@keyframes imageAnimation { 
  0% {
    opacity: 1;
    visibility: hidden; 
    @include animation-timing-function(ease-in);
  }
  12.5% {
    opacity: 1;
    visibility: visible; 
    @include animation-timing-function(ease-out);
  }
  25% {opacity: 1; visibility: visible;}
  37.5% {opacity: 1; visibility: hidden; }
  100% {opacity: 1; visibility: hidden; }
}
/*.slidebg .item img, .slick-slide img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;}  
.slidebg .item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
*/
/* ==========================================================================
   CAROUSEL
   ========================================================================== */
.carousel { }
.carousel-tabs, .carousel-tabs-navigation, .carousel-tabs2, .carousel-tabs-navigation2, .carousel-tabs3, .carousel-tabs-navigation3 { width: 100%;}
.carousel-cell { width: 100%; padding: 40px; height: auto; /*min-height: 500px;*/}
.carousel-tabs .carousel-cell > .w50{ padding: 20px; height: auto; }
.carousel-cell figure { width: 80%; }

.con1 .carousel-tabs-navigation2 .grid-item h4:hover { cursor: pointer; background: rgba(72, 121, 255, 0.5); }
.con2 .carousel-tabs-navigation2 .grid-item h4:hover { cursor: pointer; background: rgba(228, 89, 63, 0.5); }
.con3 .carousel-tabs-navigation2 .grid-item h4:hover { cursor: pointer; background: rgba(226, 110, 200, 0.5); }
.con4 .carousel-tabs-navigation2 .grid-item h4:hover { cursor: pointer; background: rgba(209, 129, 81, 0.5); }
.carousel-tabs-navigation .grid-item.con1 h4:hover { cursor: pointer; background: rgba(72, 121, 255, 0.5); }
.carousel-tabs-navigation .grid-item.con2 h4:hover { cursor: pointer; background: rgba(228, 89, 63, 0.5); }
.carousel-tabs-navigation .grid-item.con3 h4:hover { cursor: pointer; background: rgba(226, 110, 200, 0.5); }
.carousel-tabs-navigation .grid-item.con4 h4:hover { cursor: pointer; background: rgba(209, 129, 81, 0.5); }
.carousel-tabs-navigation .grid-item.con1.is-nav-selected h4 { background-color: var(--con1); }
.carousel-tabs-navigation .grid-item.con2.is-nav-selected h4 { background-color: var(--con2); }
.carousel-tabs-navigation .grid-item.con3.is-nav-selected h4 { background-color: var(--con3); }
.carousel-tabs-navigation .grid-item.con4.is-nav-selected h4 { background-color: var(--con4); }
.con1 .carousel-tabs-navigation2 .grid-item.is-nav-selected h4 { background-color: var(--con1); }
.con2 .carousel-tabs-navigation2 .grid-item.is-nav-selected h4 { background-color: var(--con2); }
.con3 .carousel-tabs-navigation2 .grid-item.is-nav-selected h4 { background-color: var(--con3); }
.con4 .carousel-tabs-navigation2 .grid-item.is-nav-selected h4 { background-color: var(--con4); }

.carousel-tabs-navigation, .carousel-tabs-navigation2, .carousel-tabs-navigation3 { padding: 0 40px;}
.carousel-tabs-navigation .grid-item, .carousel-tabs-navigation2 .grid-item, .carousel-tabs-navigation3 .grid-item { border-right: 2px solid var(--schwarz); padding: 0px;}
.bg-schwarz .carousel-tabs-navigation .grid-item, .bg-schwarz .carousel-tabs-navigation2 .grid-item, .bg-schwarz .carousel-tabs-navigation3 .grid-item { border-right: 2px solid var(--weiss);}
.grid-item h4 { text-align: center; padding: 20px; transition: all 0.3s ease-in-out; }

.carousel-tabs-navigation .grid-item.is-nav-selected h4, .carousel-tabs-navigation2 .grid-item.is-nav-selected h4, .carousel-tabs-navigation3 .grid-item.is-nav-selected h4 { color: var(--weiss);   }
@media screen and (max-width: 1023px) { 
.grid-item h4 { padding: 15px;}
.carousel-tabs-navigation, .carousel-tabs-navigation2, .carousel-tabs-navigation3 { padding: 0 40px;}
.carousel-cell { padding: 40px 30px; }
}
/* ==========================================================================
   FLICKITY STYLES
   ========================================================================== */
.flickity-button {
  background: transparent;
}
.flickity-prev-next-button {
  width: 35px;
  height: 35px;
}
.flickity-prev-next-button.previous {
  left: 1px;
}
.flickity-prev-next-button.next {
  right: 1px;
}
.flickity-page-dots {
  bottom: -25px;
}

.flickity-page-dots .dot.is-selected {
  background: var(--schwarz);
} 

/* ==========================================================================
   HORIZONTAL ACCORDEON
   ========================================================================== */

/* ==========================================================================
   TABS
   ========================================================================== */
.tab2 { width: 100%; }
.tablinks, .tablinks2 {
    cursor: pointer;
    padding: 0px;
    border-right: 2px solid var(--schwarz);
}
.bg-schwarz .tablinks { border-right: 2px solid var(--weiss); }
.tab > div:last-child, .tab2 > div:last-child { border-right: none; }
.tablinks h4, .tablinks2 h4 { text-align: left; padding: 20px; transition: all 0.5s ease-in-out;}
.tablinks2 h4 { width: 100%; }
.tablinks.active h4, .tablinks2.active h4 { color: var(--weiss) !important;}
.tablinks.con1 h4:hover, .tablinks2.con1 h4:hover { background: rgba(74, 109, 207, 0.5); }
.tablinks.con2 h4:hover, .tablinks2.con2 h4:hover { background: rgba(228, 89, 63, 0.5); }
.tablinks.con3 h4:hover, .tablinks2.con3 h4:hover { background: rgba(226, 110, 200, 0.5); }
.tablinks.con4 h4:hover, .tablinks2.con4 h4:hover { background: rgba(209, 129, 81, 0.5); }
.tablinks.active.con1 h4, .tablinks2.active.con1 h4{ background-color: var(--con1);}
.tablinks.active.con2 h4, .tablinks2.active.con2 h4 { background-color: var(--con2);}
.tablinks.active.con3 h4, .tablinks2.active.con3 h4 { background-color: var(--con3);}
.tablinks.active.con4 h4, .tablinks2.active.con4 h4 { background-color: var(--con4);}
.tabcontent, .tabcontent2 {
    width: 100%; 
    margin-top: 40px;}
.tabcontent, .tabcontent2 { width: 100%; display: none; flex-direction: row;  }
.tabcontent .w33 { width: 33%; }
.tabcontent2 .w50 { width: 50%; }
.tabcontent .button-wrapper, .tabcontent2 .button-wrapper {padding: 0 20px; }
#A1, #B1 { justify-content: flex-start; }
#A2 { justify-content:center; }
#A3, #B2 { justify-content: flex-end; }
@media screen and (max-width: 820px) { 
.tabcontent, .tabcontent2 { width: 50%; display: none; flex-direction: row; margin-top: 0px; }
#A1, #B1 { align-items: flex-start; justify-content:center; }
#A2 { align-items: center; justify-content:center;}
#A3, #B2 { align-items: flex-end; justify-content:center; }
.tabcontent .button-wrapper, .tabcontent2 .button-wrapper { width: 100%; }
.tablinks h4, .tablinks2 h4 { padding: 40px 10px; border-right: none;}
.tab.border-bottom, .tab2.border-bottom { border-bottom: none;}
.tabcontent2 .w50 { width: 100%; }
.tab > div:last-child, .tab2 > div:last-child { border-right: 2px solid var(--schwarz);}
.bg-schwarz .tab > div:last-child, .bg-schwarz .tab2 > div:last-child { border-right: 2px solid var(--weiss);}
}
/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */    
.testimonials, .slideWrap, .testimonial-slider { width: 100%;}
.testimonial-slider { padding-bottom: 50px; }
.slideWrap .testimonial { 
    width: 100%;
    text-align: center;
    max-width: 850px;
    margin-bottom: 20px;}
.slideWrap .testimonial-body { 
    text-align: center;
    margin: 0px auto;
    background-color: var(--con1);
    /*border: 1px solid var(--schwarz);*/
    border-radius: 6px;
    margin-bottom: 1.25em;
    padding: 40px 20px;
    
    position: relative;
    text-align: center;}
.slideWrap .testimonial-body::after {
    background-color: var(--con1);
    bottom: -11px;
    content: "";
    display: block;
    height: 20px;
    left: 50%;
    position: absolute;
    transform: skewY(-45deg);
    width: 20px;
    /*border-bottom: 1px solid var(--schwarz);
    border-left: 1px solid var(--schwarz);*/
}
.slideWrap .testimonial-meta {
 padding-top: 10px; }


/* ==========================================================================
    Footer
   ========================================================================== */
footer { 
    position: relative; 
    width: 100%; }
footer .wrapper {
    padding-top: 50px;
    padding-bottom: 50px; }
footer ul { padding: 0 20px 0 0 !important; margin: 0 !important; width: 100%; max-width: 810px;}
footer ul li { 
    list-style: none;
    font-family: var(--font-family-regular);
    font-size: 20px !important; 
    line-height: 20px;
    margin: 0 20px 0 0;}
footer p { font-weight: 500;}
footer .w50 { padding-right: 20px; padding-bottom: 35px; }
footer ul li .icon { height: 20px;}
footer .abstand-oben { padding-top: 40px;}
@media screen and (max-width: 680px) { 
footer ul li:nth-child(even) { display: none;}
footer ul li { width: 100%; margin: 0 10px 0 0;}
}
/* ==========================================================================
   Image Ticker
   ========================================================================== */


/* ==========================================================================
    AKKORDEON 
   ========================================================================== */
button { 
    background-color: var(--warmgrau);
    padding-block: 0;
    padding-inline: 0;
    border-width: 0;
    border-image: none;
    color: var(--schwarz);} 
.bg-schwarz button { color: var(--weiss); } 
.accordion-btn, .accordion-btn2 { width: 100%; cursor:pointer; text-align: left; transition: all 0.5s ease-in-out; padding: 0;  margin: 0;}
.accordion .accordion-btn .title, .accordion .accordion-btn .arrow {   transition: all 0.5s ease-in-out;}
.accordion .accordion-btn .arrow { width: 102px; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.accordion .accordion-btn .title { width: calc(100% - 102px); padding: 20px; transition: all 0.5s ease-in-out; }

.accordion .accordion-btn .arrow img {  transition: all 0.5s ease-in-out; }
.bg-schwarz .accordion .accordion-btn .arrow img {  filter: invert(1);}
.accordion .accordion-btn.active .arrow img { transform: rotate(180deg); filter: invert(1); }
.accordion .accordion-btn:hover .arrow img { transform: rotate(-90deg); }
.accordion .accordion-btn.active:hover .arrow img { transform: rotate(0deg); }
.accordion .accordion-btn.con1:hover .title { padding-left: 25px; }
.accordion .accordion-btn.con2:hover .title { padding-left: 25px;  }
.accordion .accordion-btn.con3:hover .title { padding-left: 25px;  }
.accordion .accordion-btn.con4:hover .title { padding-left: 25px; }
.accordion .accordion-btn.con1:hover { background: rgba(209, 129, 81, 0.5);}
.accordion .accordion-btn.con2:hover { background: rgba(228, 89, 63, 0.5); }
.accordion .accordion-btn.con3:hover { background: rgba(226, 110, 200, 0.5); }
.accordion .accordion-btn.con4:hover { background: rgba(209, 129, 81, 0.5);}
.accordion .accordion-btn.active .title, .accordion .accordion-btn.active .arrow {  color: var(--weiss);}

.accordion .accordion-btn.con1.active { background-color: var(--con1); color: var(--weiss);}
.accordion .accordion-btn.con2.active { background-color: var(--con2); color: var(--weiss);}
.accordion .accordion-btn.con3.active { background-color: var(--con3); color: var(--weiss);}
.accordion .accordion-btn.con4.active { background-color: var(--con4); color: var(--weiss);}
.faq .unit { padding: 10px 0 0 0;}
.faq .accordion-btn2 { line-height: 1.25em; padding: 10px; margin: 10px 0 0 0;  font-weight: 500; }
.faq .accordion-btn2.con1:hover { padding-left: 25px; /* background: rgba(72, 121, 255, 0.5); */ }
.faq .accordion-btn2.con2:hover { padding-left: 25px; /* background: rgba(228, 89, 63, 0.5); */ }
.faq .accordion-btn2.con3:hover { padding-left: 25px; /* background: rgba(226, 110, 200, 0.5); */ }
.faq .accordion-btn2.con4:hover { padding-left: 25px; /* background: rgba(209, 129, 81, 0.5); */ }
.faq  .accordion-btn2.con1.active { background-color: var(--con1); color: var(--weiss); }
.faq  .accordion-btn2.con2.active { background-color: var(--con2); color: var(--weiss); }
.faq  .accordion-btn2.con3.active { background-color: var(--con3); color: var(--weiss); }
.faq  .accordion-btn2.con4.active { background-color: var(--con4); color: var(--weiss); }
.panel, .panel2 {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: transform .25s .1s ease-in-out;  }
.panel.show, .panel2.show {  
  opacity: 1;
  visibility: visible;
  max-height: none;
  padding:  0 0 20px 0;} 
.accordion .panel .textWrap { padding: 0px 20px; }
.faq .panel2.show { padding: 0;}  
.faq .panel2 .textWrap { padding: 10px 0 0 0;}  
.faq .wrapper2 .w60 { padding-bottom: 40px;}  
@media screen and (max-width: 1023px) { 
.accordion-btn, .accordion-btn2 { }
.accordion .accordion-btn .title { width: calc(100% - 102px); padding: 15px;}
.accordion .panel .textWrap { padding: 0px 15px; }
.accordion .accordion-btn .arrow { padding: 15px 0; }
.accordion .accordion-btn .arrow img {  width: 22px; }
}
@media screen and (max-width: 820px) { 
.accordion .accordion-btn .title { width: calc(100% - 102px); padding: 15px;}
.accordion .accordion-btn .arrow { padding: 15px 0; }
}
@media screen and (max-width: 400px) {
.accordion .accordion-btn .title { width: calc(100% - 85px); padding: 10px;}
.accordion .panel .textWrap { padding: 0px 10px; }
.accordion .accordion-btn .arrow { width: 85px; padding: 10px 0; }
.accordion .accordion-btn .arrow img {  width: 20px; }
}

/* ==========================================================================
   Animated Hamburger Icon Version 1
   ========================================================================== */

.opener { height: 100%; border: 1px solid red;}
.beschriftung { padding: 0 15px ; font-size: 15px !important; line-height: 19px !important; font-family: var(--font-family-bold); text-transform: uppercase; cursor: pointer; }
#hamburger-icon {

  position: relative;
  width: 25px;
  height: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;}
 
#hamburger-icon span {  
  display: block;
  height: 2px;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;}

#hamburger-icon span { 
  background-color: var(--schwarz);  
  -webkit-box-shadow: 0 0 0 0;
  -moz-box-shadow: 0 0 0 0;
  box-shadow: 0 0 0 0;}

#hamburger-icon span:nth-child(1) { top: 2px; width: 25px;}
#hamburger-icon span:nth-child(2),#hamburger-icon span:nth-child(3) { top:10px; width: 15px;}
#hamburger-icon span:nth-child(4) { top: 18px; width: 20px;}
#hamburger-icon:hover span { width: 25px;}
#hamburger-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%; }
  
#hamburger-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#hamburger-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;  }  
      
@media screen and (max-width: 680px) { 

}

/* ==========================================================================
   Position
   ========================================================================== */

.relative { position: relative; }
.sticky { position: -webkit-sticky; position: sticky; top: 180px; }
.fixed { position: fixed; }
.absolute { position: absolute;}
img.alignleft { margin: 10px 30px 10px 0; }
img.alignright { margin: 10px 0 10px 30px; }
.w40.padding-bottom-extra { padding-bottom:160px; }


.with_frm_style input[type=text], .with_frm_style input[type=password], .with_frm_style input[type=email], .with_frm_style input[type=number], .with_frm_style input[type=url], .with_frm_style input[type=tel], .with_frm_style input[type=phone], .with_frm_style input[type=search], .with_frm_style select, .with_frm_style textarea, .frm_form_fields_style, .with_frm_style .frm_scroll_box .frm_opt_container, .frm_form_fields_active_style, .frm_form_fields_error_style, .with_frm_style .frm-card-element.StripeElement, .with_frm_style .frm_slimselect.ss-main {
   border: 1px solid var(--schwarz) !important;
   background-color: var(--grau) !important;
    border-radius: 0 !important;
    font-size: 18px !important;
}
.with_frm_style .frm_primary_label { 
 font-size: 18px !important;
}
.frm_style_formidable-style.with_frm_style p.description, .frm_style_formidable-style.with_frm_style div.description, .frm_style_formidable-style.with_frm_style div.frm_description, .frm_style_formidable-style.with_frm_style .frm-show-form > div.frm_description, .frm_style_formidable-style.with_frm_style .frm_error, .frm_style_formidable-style.with_frm_style .frm_pro_max_limit_desc {
padding-top: 5px !important; }
.frm_style_formidable-style.with_frm_style .frm-show-form .frm_section_heading h3[class*="frm_pos_"] {
    border-top: none !important;
}

.frm_style_formidable-style.with_frm_style .frm_compact .frm_dropzone.dz-clickable .dz-message, .frm_style_formidable-style.with_frm_style input[type=submit], .frm_style_formidable-style.with_frm_style .frm_submit input[type=button], .frm_style_formidable-style.with_frm_style .frm_submit button, .frm_form_submit_style, .frm_style_formidable-style.with_frm_style .frm-edit-page-btn {
    width: auto;
    font-size: 18px;
    height: auto;
    line-height: normal;
    text-align: center;
    background: var(--schwarz);
    border-width: 0px;
    border-color: transparent;
    border-style: solid;
    color: var(--grau);
    cursor: pointer;
    font-weight: normal;
    border-radius: 0px;
    text-shadow: none;
    padding: 8px 40px 8px 16px;
    box-sizing: border-box;
    box-shadow: 0;
    margin: 10px;
    margin-left: 0;
    margin-right: 0;
    vertical-align: middle;
    text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease-in-out;
-webkit-box-shadow: 14px 11px 4px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 14px 11px 4px 0px rgba(0,0,0,0.1);
box-shadow: 14px 11px 4px 0px rgba(0,0,0,0.1);
-moz-font-feature-settings: "ss01"; -webkit-font-feature-settings: "ss01"; font-feature-settings: "ss01";
}
.with_frm_style.frm_center_submit .frm_submit {
    text-align: left;
}
.frm_style_formidable-style.with_frm_style .frm-edit-page-btn:hover, .frm_style_formidable-style.with_frm_style input[type=submit]:hover, .frm_style_formidable-style.with_frm_style .frm_submit input[type=button]:hover, .frm_style_formidable-style.with_frm_style .frm_submit button:hover {
    background: var(--schwarz);
    border-color: transparent;
    color: var(--grau);
    padding: 8px 31px 8px 25px;
}
.pum-theme-1072, .pum-theme-default-theme {
    background-color: rgba(255, 255, 255, 0);
}
.pum-theme-1253 .pum-content + .pum-close, .pum-theme-default-theme-2 .pum-content + .pum-close {
background-color: var(--schwarz);
}