#header .header-btn-collapse-nav {
  background: var(--tertiary);
}

/* Service-Quicknav (servicenavi.php): Icons sind fix 50px und passen auf
   schmalen Screens nicht in die col-2-Spalten - sorgt sonst fuer horizontales
   Ueberlaufen der Seite. Deshalb responsiv verkleinern. */
@media (max-width: 767.98px) {
  #service-quicknav .col-2 {
    padding-left: 6px;
    padding-right: 6px;
  }
  #service-quicknav .feature-box-icon img,
  #service-quicknav .feature-box-icon svg {
    width: 32px !important;
    height: 32px !important;
  }
}
@media (max-width: 400px) {
  #service-quicknav .col-2 {
    padding-left: 4px;
    padding-right: 4px;
  }
  #service-quicknav .feature-box-icon img,
  #service-quicknav .feature-box-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
}

	.text-19 {
		font-size: 6.33em !important;
		line-height: 1em;
	}

.text-18 {
  font-size: 6em !important;
  line-height: 0.8em;
}

@media (min-width: 992px) {
  #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a, #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a {
    color: var(--tertiary);
  }
  #header .header-nav.header-nav-links nav > ul:not(:hover) > li > a.active {
    color: #f2f2f2;
  }

  /* Aktiver Menüpunkt im "Unsere Stärken"-Dropdown: Theme stylt sonst nur li.active,
     unser PHP setzt "active" aber auf das <a>, daher hier eigene Hervorhebung */
  #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li > a.active {
    color: var(--secondary) !important;
    font-weight: 700;
  }

  /* Hover im Dropdown: Theme-Standard (var(--primary), fast weiß) ist auf dem
     weißen Dropdown-Hintergrund kaum sichtbar, daher dunkelgrau statt dessen */
  #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li > a:hover {
    color: var(--dark) !important;
  }

    #header .header-nav.header-nav-links nav > ul li:hover > a {
    color: var(--primary);
  }



  
#header .header-btn-collapse-nav {
  background: var(--tertiary);
}
  
}
.jobs-brush-badge {
  position: relative;
  background:#1a2e33;
  box-shadow: 5px 5px 15px #000000;
  border-radius:10px;
}

.job-entry-brush {
  position: relative;
  padding: .5rem 0;
}

.job-entry-brush-shape {
  position: absolute;
  left: -15%;
  top: 45%;
  transform: translateY(-50%);
  width: 130%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.job-entry-brush a {
  position: relative;
  z-index: 1;
}

.jobs-brush-badge-content {
  position: relative;
  z-index: 1;
  padding: 2.25rem 1.75rem 2rem;
}

.pabstand p{
	margin-bottom:9px !important;
}
.owl-carousel .owl-nav button.owl-next {
  right: 25px !important;
}
@media (max-width: 572px) {

	.text-19 {
	  font-size: 3em !important;
	}

	.text-12 {
	  font-size: 1.5em !important;
	}
	.text-16 {
		font-size: 3em !important;
	}
	.text-18 {
	  font-size: 4em !important;
	  line-height: 0.8em;
	}


}
.line6 iframe, .line iframe {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.call-to-action.button-centered .call-to-action-content {
  text-align: center;
  width: 100%;
  padding: 5px 0 0 !important;
  margin: 0;
}


/* Scroll-Sequenz (wiederverwendbar, siehe admin/includes/scroll-sequence-frames.php) */
.scroll-sequence-wrapper {
	position: relative;
}
/* .contain hat kein Padding, das die negativen Bootstrap-Row-Aussenraender
   auffaengt -> horizontales Ueberlaufen auf schmalen Screens (betrifft alle
   Service-Seiten mit Scroll-Sequenz, auch die verschachtelte Row darin). */
.scroll-sequence-wrapper .row {
	align-items: stretch;
	margin-left: 0;
	margin-right: 0;
}
.scroll-sequence-sticky {
	position: sticky;
	top: 83px; /* Höhe des fixierten Sticky-Headers (.header-body), siehe header.php stickyHeaderContainerHeight */

	display: flex;
	align-items: center;
	justify-content: center;
}
.scroll-sequence-canvas {
	width: 100%;
	height: auto;
	max-height: 80vh;
}
.scroll-sequence-text {
	padding: 5vh 0;
}

.positionjob {
	position:absolute;
	z-index:1000;
	top:-180px;"
}


.thumb-info .thumb-info-title {
  transition: all 0.3s;
  background: #1a2e33c4;
  color: var(--light);
  font-weight: 600;
  left: 0;
  letter-spacing: -.05em;
  position: absolute;
  z-index: 2;
  max-width: 90%;
  font-size: 56px;
  padding: 13px 21px 13px;
  bottom: 13%;
}

.jobblock p, .jobblock h1, .jobblock h2, .jobblock h3, .jobblock ul {
	color:#ffffff !important;
}

.jobblock h1{
	font-weight:bold;
}
@media (max-width: 991.98px) {
	/* Test: Sticky-Effekt komplett aus auf Tablet/Phone - Bild scrollt sofort
	   normal mit durch, kein Stehenbleiben mehr. */
	.scroll-sequence-sticky {
		position: relative;
		height: auto;
		top: 0;
	}
	/* Angled-Deko-Uebergang: 72px Padding ist auf Tablet/Phone unverhaeltnismaessig
	   viel Platz vor der Ueberschrift. Bewusst bis 991.98px (nicht nur 767px), sonst
	   bekommen Geraete wie ein 768px breites iPad wieder das volle Padding. */
	.custom-angled .section-angled-layer-bottom,
	.custom-angled .section-angled-layer-top {
		padding: 2rem 0 !important;
	}
}
@media (max-width: 767px) {
	.scroll-sequence-text {
		padding: 2rem 0;
	}

	.thumb-info .thumb-info-title {

	  font-size: 39px;

	}
	
	.positionjob {
		position:relative;
		z-index:1000;
		top:0px;"
	}
}
.accordion .card-header a {
  color: #000;
}


/* Trockenbau FAQ */
#trockenbau-faq .accordion .card-header a {
	color: var(--tertiary);
	font-weight: 600;
}
#trockenbau-faq .accordion .card-header a:hover {
	color: var(--secondary);
}
#trockenbau-faq .accordion .card-body {
	color: var(--dark);
}

@media only screen and (min-width: 769px){
.navigation-block.sticky {
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .4);
}
}