?>
/* fensterfachbetriebec.css */

/*color: #f5c800 / 245,200,0
https://rgbacolorpicker.com/hex-to-rgba     */

:root {
	--templatefarbe_hex: #f5c800;
	--templatefarbe_rgb: 245,200,0;
	--akzentfarbe_hex: var(--templatefarbe_hex);
	--akzentfarbe_rgb: var(--templatefarbe_rgb);
	--textfarbe_hex: #030303;
    --untermenutextfarbe_hex: var(--textfarbe_hex) !important;	
	--buttonfarbe_hex: var(--akzentfarbe_hex) !important;
	--buttontextfarbe_hex: #fff !important;
	--buttonfarbe_hell_hex: var(--akzentfarbe_hex) !important;
	--buttonhintergrundfarbe_hell_hex: #f2f2f2 !important;	
	--buttontextfarbe_hell_hex: var(--textfarbe_hex) !important;	
	--hinweisboxfarbe_rgb: var(--templatefarbe_rgb) !important;
	--hinweisboxtextfarbe_hex: #fff !important;		
	--welcomeboxhintergrundfarbe_rgb: var(--templatefarbe_rgb);	
	--welcomeboxtextfarbe_hex: #fff;
	--welcomeboxbuttonfarbe_hex: #333;
	--welcomeboxbuttonhoverfarbe_hex: #444;
	--welcomeboxbuttontextfarbe_hex: var(--buttontextfarbe_hex);	
	--infobarhintergrundfarbe_hex: #444443;
	--infobarhintergrundfarbe_rgb: 68,68,67;
	--infobartextfarbe_hex: #fcfcfc;
	--shortbartextfarbe_hex: var(--buttontextfarbe_hex);
	--footerhintergrundfarbe_hex: var(--infobarhintergrundfarbe_hex) !important;
	--footertextfarbe_hex: var(--infobartextfarbe_hex) !important;
	--hintergrundfarbe_hex: #ffffff !important;
	--hintergrundfarbe_rgb: 255,255,255 !important;
	--rahmenhintergrundfarbe_hex: #ffffff !important;
	--rahmenhintergrundfarbe_grau_hex: #ededed !important;
	--rahmenhintergrundfarbe_dunkel_hex: #444445 !important;
	--menuhintergrundfarbe_hex: var(--hintergrundfarbe_hex);
	--menuhintergrundfarbe_rgb: var(--hintergrundfarbe_rgb);
	--mobilmenuhintergrundfarbe_hex: #fff !important;
	--mobilmenuhintergrundfarbe_sub_hex: var(--mobilmenuhintergrundfarbe_hex) !important;
	--mobilmenuhintergrundfarbe_sub_rgb: var(--mobilmenuhintergrundfarbe_rgb) !important;	
	--mobilmenuhintergrundfarbe_sub1_rgba: 150,150,150,0.1 !important;	
	--mobilmenuhintergrundfarbe_sub2_rgba: 150,150,150,0.15;	
	--mobilmenuhintergrundfarbe_sub3_rgba: 150,150,150,0.2;	
	--mobilmenuhintergrundfarbe_sub4_rgba: 150,150,150,0.25;	
	--mobilmenutextfarbe_hex: var(--textfarbe_hex);		
	--mobilmenubuttonfarbe_hex: var(--templatefarbe_hex);	
	--mobilmenubuttontextfarbe_hex: var(--buttontextfarbe_hex) !important;	
	--welcomecards_textfarbe_hex: var(--textfarbe_hex) !important;
	--welcomecards_hintergrundfarbe_hex: var(--hintergrundfarbe_hex) !important;	
	--highlightboxhintergrundfarbe_rgb: 250,250,250 !important;	
	--productpreviewhintergrundfarbe_links_hex: var(--rahmenhintergrundfarbe_hex);
	--productpreviewhintergrundfarbe_rechts_hex: var(--rahmenhintergrundfarbe_grau_hex);
	--bgfarbe_hex: var(--akzentfarbe_hex);
	--bgfarbe_text_hex: var(--buttontextfarbe_hex);
	--iconshome_invertiert_bg_hex: var(--akzentfarbe_hex);
	--iconshome_invertiert_text_hex: var(--buttontextfarbe_hex);	
	--kachelboxenfarbe_rgb: 255,255,255 !important;
	--winkelfarbe_rgb: var(--highlightboxhintergrundfarbe_rgb) !important;
	--boxfarbe_hex: #efefef !important;
	--claimslidefarbe_hex: var(--templatefarbe_hex) !important;
	--claimboxinnerfarbe_hex: #fff !important;
	--claimboxtextfarbe_hex: var(--akzentfarbe_hex) !important;	
	--boxverlauf_dunkel_rgb: 240,240,240 !important;		
	--boxverlauf_hell_rgb: 255,255,255 !important;
	--erfal_farbe: #ef6d00 !important;
	--erfal_farbe_rgb: 239,109,0 !important;
	--erfal_raumausstatter_farbe: #ef6d00 !important;
	--erfal_raumausstatter_farbe_rgb: 239,109,0 !important;
	--feba_farbe: #023e72 !important;
	--feba_farbe_rgb: 2,62,114 !important;
	--fensterfachbetriebe_farbe: #464646 !important;
	--fensterfachbetriebe_farbe_rgb: 70,70,70 !important;
	--kneer_suedfenster_farbe: #5aaf24 !important;
	--kneer_suedfenster_farbe_rgb: 90,175,36 !important;
	--markilux_farbe: #e20018 !important;
	--markilux_farbe_rgb: 226,0,26 !important;
	--neutral_farbe: #464646 !important;
	--neutral_farbe_rgb: 70,70,70 !important;
	--rehau_farbe: #d2346e !important;
	--rehau_farbe_rgb: 210,52,110 !important;
	--roma_farbe: #dd7907 !important;
	--roma_farbe_rgb: 221,121,7 !important;
	--terrassendaecher_farbe: #464646 !important;
	--terrassendaecher_farbe_rgb: 70,70,70 !important;
	--weru_farbe: #fffe00 !important;
	--weru_farbe_rgb: 255,254,0 !important;
	--windor_farbe: #e3010f !important;	
	--windor_farbe_rgb: 227,1,15 !important;
	--erfal_template: #ee7101 !important;
	--erfal_template_rgb: 238,113,1!important;
	--erfal-raumausstatter_template: #ee7101 !important;
	--erfal-raumausstatter_template_rgb: 238,113,1 !important;
	--feba_template: #014073 !important;
	--feba_template_rgb: 1,64,115 !important;
	--fensterfachbetriebe_template: #f5c800 !important;
	--fensterfachbetriebe_template_rgb: 245,200,0 !important;
	--kneer_suedfenster_template: #63b332 !important;
	--kneer_suedfenster_template_rgb: 99,179,50 !important;
	--markilux_template: #e2001a !important;
	--markilux_template_rgb: 226,0,26 !important;
	--neutral_template: #464646 !important;
	--neutral_template_rgb: 70,70,70 !important;
	--rehau_template: #4fc1e5 !important;
	--rehau_template_rgb: 79,193,229 !important;
	--roma_template: #ee7b1d !important;
	--roma_template_rgb: 238,123,29 !important;
	--terrassendaecher_template: #f5c800 !important;
	--terrassendaecher_template_rgb: 245,200,0 !important;
	--weru_template: #fffe00 !important;
	--weru_template_rgb: 255,254,0 !important;
	--windor_template: #ed0022 !important;	
	--windor_template_rgb: 237,0,34 !important;
}


/* PARALLAX BILDER */
.slide1-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax01-xs.jpg);
	height: 300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
}
@media (min-width: 576px) {
.slide1-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax01-sm.jpg);
	height: 400px;
}
}
@media (min-width: 768px) {
.slide1-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax01-lg.jpg);
	height: 500px;	
}
}
@media (min-width: 992px) {
.slide1-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax01-xl.jpg);
	height: 600px;
}
}
/* align = right */
.slide2-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax02-xs.jpg);
	height: 300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
}
@media (min-width: 576px) {
.slide2-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax02-sm.jpg);
	height: 400px;
}
}
@media (min-width: 768px) {
.slide2-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax02-lg.jpg);
	height: 500px;
}
}
@media (min-width: 992px) {
.slide2-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax02-xl.jpg);
	height: 600px;
}
}
/* align = left */
.slide3-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax03-xs.jpg);
	height: 300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
}
@media (min-width: 576px) {
.slide3-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax03-sm.jpg);
	height: 400px;
}
}
@media (min-width: 768px) {
.slide3-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax03-lg.jpg);
	height: 500px;
}
}
@media (min-width: 992px) {
.slide3-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax03-xl.jpg);
	height: 600px;	
}
}
/* align = left */
.slide4-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax04-xs.jpg);
	height: 300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
}
@media (min-width: 576px) {
.slide4-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax04-sm.jpg);
	height: 400px;
}
}
@media (min-width: 768px) {
.slide4-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax04-lg.jpg);
	height: 500px;
}
}
@media (min-width: 992px) {
.slide4-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/parallax04-xl.jpg);
	height: 600px;	
}
}
/* align = left */
.slide5-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/-xs.jpg);
	height: 300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
}
@media (min-width: 576px) {
.slide5-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/-sm.jpg);
	height: 400px;
}
}
@media (min-width: 768px) {
.slide5-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/-lg.jpg);
	height: 500px;
}
}
@media (min-width: 992px) {
.slide5-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/-xl.jpg);
	height: 600px;	
}
}
/* align = left */
.slide6-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/-xs.jpg);
	height: 300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
}
@media (min-width: 576px) {
.slide6-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/-sm.jpg);
	height: 400px;
}
}
@media (min-width: 768px) {
.slide6-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/-lg.jpg);
	height: 500px;
}
}
@media (min-width: 992px) {
.slide6-fensterfachbetriebe {
	background-image: url(/config-templates/fensterfachbetriebe/img/parallax/-xl.jpg);
	height: 600px;	
}
}

/* Kachelboxen: schwacher Hintergrund */
div.kachelbg1,
div.kachelbg2,
div.kachelbg3,
div.kachelbg4,
div.kachelbg5, 
div.kachelbg6 {
	position: relative;
}

@media (max-width: 991px) {
div.kachelbg1::before,	
div.kachelbg2::before,	
div.kachelbg3::before,	
div.kachelbg4::before,	
div.kachelbg5::before,	
div.kachelbg6::before {
	background: none !important;
}
}
	
div.kachelbg1::before {
  content: "";
  background: url(/config-templates/fensterfachbetriebe/img/kachelboxen/kachelbox01-md.jpg);
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 0;
  transform: scale(1.4);  
}
div.kachelbg2::before {
  content: "";
  background: url(/config-templates/fensterfachbetriebe/img/kachelboxen/kachelbox02-md.jpg);
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 0;
  transform: scale(1.4);   
}
div.kachelbg3::before {
  content: "";
  background: url(/config-templates/fensterfachbetriebe/img/kachelboxen/kachelbox03-md.jpg);
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 0;
  transform: scale(1.4); 
}
div.kachelbg4::before {
  content: "";
  background: url(/config-templates/fensterfachbetriebe/img/kachelboxen/kachelbox04-md.jpg);
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 0;
  transform: scale(1.4);   
}
div.kachelbg5::before {
  content: "";
  background: url(/config-templates/fensterfachbetriebe/img/kachelboxen/kachelbox05-md.jpg);
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 0;
  transform: scale(1.4);   
}
div.kachelbg6::before {
  content: "";
  background: url(/config-templates/fensterfachbetriebe/img/kachelboxen/kachelbox06-md.jpg);
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 0;
  transform: scale(1.4);   
}


/* ab hier css für die Fenster-Seiten */

/*--------------- Firmengeschichte / Timeline -----------------------*/
/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
  border-style: dashed; 
  border-width: 1px; 
  border-color: #d2d6dd; 
}

/* Container around content */
.timeline-container {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}

/* The circles on the timeline */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -12px;
    background-color: #fff;
    border: 4px solid var(--templatefarbe_hex); /*Templatefarbe*/
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

//* Place the container to the left */
.timeline-left {
    left: 0;
    padding-left: 0px;
}

/* Place the container to the right */
.timeline-right {
    left: 50%;
    padding-right: 0px;
}
/* Add arrows to the left container (pointing right) */
.timeline-left::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #9D9D9B;
}

/* Add arrows to the right container (pointing left) */
.timeline-right::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #9D9D9B transparent transparent;
}




/* Fix the circle for containers on the right side */
.timeline-right::after {
    left: -30px;
}

/* The actual content */
.timeline-content {
    padding: 20px 30px;
    position: relative;
    border-radius: 6px;
    border-width: 1px; 
    border-style: solid;
    border-color: #9D9D9B;
}



.timeline-content h2 {
    margin: 0 0 1em 0!important;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
    left: 31px;

}

/* Full-width containers */
.timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
}

/* Make sure that all arrows are pointing leftwards */
.timeline-container::before {
    left: 60px;
    border: medium solid #d2d6dd;
    border-width: 10px 10px 10px 0;
    border-color: transparent #d2d6dd transparent transparent;
}

/* Make sure all circles are at the same spot */
.timeline-left::after, .timeline-right::after {
    left: 15px;
}

/* Make all right containers behave like the left ones */
.timeline-right{
    left: 0%;
}
    
}
.timeline-container::after {
      content: attr(data); 
      position: absolute;
      width: 60px; /* Adjust the width as desired */
      height: 60px; /* Adjust the height as desired */
      right: -30px; /* Adjust the positioning as desired */
      background-color: var(--templatefarbe_hex); /* Set the background color to white */
      border: 2px solid var(--templatefarbe_hex); /* Set a solid border color */
      color: #ffffff; /* Set the number color to white */
      font-weight: bold; /* Make the number bold */
      font-size: 24px; /* Adjust the font size as desired */
      top: calc(50% - 30px); /* Adjust the positioning to center the bubble */
      border-radius: 50%;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
}    
	
    .card {
        padding: 0px;
        margin-right: 0px!important;
    }

.no-background {
        background-color: transparent!important;
        border-top: 0px!important;
    }


.long-arrow-down{
  display: block;
  margin: 30px auto;
  width: 18px;
  height: 18px;
  border-top: 6px solid #000;
  border-left: 6px solid #000;
}


.long-arrow-down{
 transform: rotate(-135deg);
}

.long-arrow-down::after{
  content: "";
  display: block;
  width: 5px;
  height: 445px;
  background-color: black;
  transform: rotate(-45deg) translate(155px, 63px);
  left: 0;
  top: 0;
}