/* kunden.css */

:root {
  --templatefarbe_hex: #ff06ff !important;
  --templatefarbe_rgb: 255, 6, 255 !important;
  --akzentfarbe_hex: #008080 !important;
  --akzentfarbe_rgb: 0, 128, 128 !important;
  --textfarbe_hex: #030303 !important;
  --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) !important;
  --welcomeboxtextfarbe_hex: #fff !important;
  --welcomeboxbuttonfarbe_hex: #333 !important;
  --welcomeboxbuttonhoverfarbe_hex: #444 !important;
  --welcomeboxbuttontextfarbe_hex: var(--buttontextfarbe_hex) !important;
  --infobarhintergrundfarbe_hex: #444443 !important;
  --infobarhintergrundfarbe_rgb: 68, 68, 67 !important;
  --infobartextfarbe_hex: #fcfcfc !important;
  --contactbartextfarbe_hex: var(--welcomeboxtextfarbe_hex) !important;
  --shortbartextfarbe_hex: var(--buttontextfarbe_hex) !important;
  --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);
  --menubuttonfarbe_hex: var(--akzentfarbe_hex) !important;
  --menutextfarbe_hex: var(--textfarbe_hex) !important;
  --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 !important;
  --mobilmenuhintergrundfarbe_sub3_rgba: 150, 150, 150, 0.2 !important;
  --mobilmenuhintergrundfarbe_sub4_rgba: 150, 150, 150, 0.25 !important;
  --mobilmenutextfarbe_hex: var(--textfarbe_hex) !important;
  --mobilmenubuttonfarbe_hex: var(--templatefarbe_hex) !important;
  --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
  ) !important;
  --productpreviewhintergrundfarbe_rechts_hex: var(
    --rahmenhintergrundfarbe_grau_hex
  );
  --bgfarbe_hex: var(--akzentfarbe_hex);
  --bgfarbe_text_hex: var(--buttontextfarbe_hex);
  --bg-section-hellgrau_hex: var(--productpreviewhintergrundfarbe_rechts_hex);
  --bg-section-grau_hex: var(--productpreviewhintergrundfarbe_rechts_hex);
  --bg-section-dunkelgrau_hex: var(--productpreviewhintergrundfarbe_rechts_hex);
  --bg-section-farbe1_hex: var(--templatefarbe_hex);
  --bg-section-farbe2_hex: var(--templatefarbe_hex);
  --bg-section-farbe3_hex: var(--templatefarbe_hex);
  --iconshome_invertiert_bg_hex: var(--akzentfarbe_hex);
  --iconshome_invertiert_text_hex: var(--buttontextfarbe_hex) !important;
  --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;
}

.koop-farbe {
  color: var(--templatefarbe_hex) !important;
}
.koop-farbe-rgb {
  color: rgb(var(--templatefarbe_rgb)) !important;
}
.koop-bg-farbe {
  background-color: var(--templatefarbe_hex) !important;
}
.koop-bg-farbe-rgb {
  background-color: rgb(var(--templatefarbe_rgb)) !important;
}
.erfal-template .bg-gradient,
.erfal-raumausstatter-template .bg-gradient,
.feba-template .bg-gradient,
.fensterfachbetriebe-template .bg-gradient,
.kneer-suedfenster-template .bg-gradient,
.markilux-template .bg-gradient,
.neutral-template .bg-gradient,
.rehau-template .bg-gradient,
.roma-template .bg-gradient,
.terrassendaecher-template .bg-gradient,
.weru-template .bg-gradient,
.windor-template .bg-gradient,
.bg-gradient {
  background: rgb(255, 255, 255);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) -20%,
    rgba(var(--templatefarbe_rgb), 1) 50%
  ) !important;
}

/* kundenspezifische Ergänzungen */

.bg-gradient {
  background: rgb(255, 255, 255);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) -20%,
    rgba(var(--templatefarbe_rgb), 1) 50%
  ) !important;
}

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

.timeline details {
  overflow: hidden;
}

.timeline summary {
  cursor: pointer;
  font-weight: bold;
  line-height: 1.3;
  margin-left: 1.5rem;
  list-style-position: outside;
  font-size: 1.33em;
  line-height: 1.3;
}

.timeline summary::marker {
  font-size: 1em;
}

.timeline summary:hover {
  color: var(--templatefarbe_hex);
}

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

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

/* Verringert Abstand zwischen den Elementen  */
@media (min-width: 768px) {
  .timeline > div:not(:first-child) {
    margin-top: -3em;
  }
}

/* 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;
}

/* Place the container to the right */
.timeline-right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.timeline-left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 15px;
  border: medium solid #d2d6dd;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #d2d6dd;
}

/* Add arrows to the right container (pointing left) */
.timeline-right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 15px;
  border: medium solid #d2d6dd;
  border-width: 10px 10px 10px 0;
  border-color: transparent #d2d6dd transparent transparent;
}

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

/* The actual content */
.timeline-content {
  padding: 20px 30px;
  background-color: #d2d6dd;
  position: relative;
  border-radius: 6px;
}

.timeline-content h3 {
  margin: 0 0 0.5em 0 !important;
}

/* Media queries - Responsive timeline on screens less than 768px wide */
@media screen and (max-width: 768px) {
  /* 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%;
  }
}