:root {
    --standardjewelcolor: #045B8E;
    --darkjewelcolor: #213a8f;
    --lightjewelcolor: rgba(0,0,0,.06);
	--swiper-theme-color: #3a7b91;
	--dunkelgrau: rgb(113,112,111);
	--hellgrau: rgba(0,0,0,.1);
}

html {
  font-size: 18px;
  line-height: 1.4;
}

body {
    width: 100%;
    height: 100%;
    font-weight: 300 !important;
}

::-moz-selection {
  background: #A9C934;
  text-shadow: none;
}

::selection {
  background: #A9C934;
  text-shadow: none;
}

.standard {
    background: var(--standardjewelcolor);
}

.dark {
    background: var(--darkjewelcolor);
}

.light {
    background: var(--lightjewelcolor);
}

.white {
    background: #fff;
}

.smallerfont {
	font-size: .5em;
}

.green {
	color: #006400;
}

.dunkelgrau {
	background: var(--dunkelgrau);
}


/****************/
/*  New Styles  */
/****************/

.upperheadsection {
    background: #ececec;
    font-size: .85em;
    font-weight: 500;
    text-align: right;
}

.upperheadsection a {
	color: #505048;
	position: relative;
}

.upperheadsection a:visited,
.upperheadsection a:hover {
	color: #505048;
}

.upperheadsection a::after {
    content: "\f078";
    font: var(--fa-font-solid);
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translatey(-50%) rotate(-90deg);
    font-size: .8em;
}

body.shrink .upperheadsection {
	font-size: .65em;
}


body.shrink span.topper {
    visibility: visible;
    transition: 500ms;
    bottom: -20px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}

span.topper {
    bottom: -65px;
    position: fixed;
    padding: 5px 20px 25px 20px;
    z-index: 1100;
    background: var(--darkjewelcolor);
    visibility: hidden;
    transition: 300ms;
    right: 5em;
}

span.topper svg {
	fill: #fff;	
}

header {
    background: #fff;
	box-shadow: 0 2px 5px rgba(50,50,50,.3);
}

header.entry-header {
	background: none;
	box-shadow: 0 3px 0 0 var(--darkjewelcolor);
	padding: .5em;
}

.entry-content {
	margin-bottom: 3em !important;
}

.headinfos a {
	color: #fff !important;
	text-decoration: underline;
}

.navbar-brand {
	box-shadow: 0 3px 4px 2px rgba(20,20,20,.3);
	/* background: #ffffff url('https://system-werbung.com/dev/budke/wp-content/themes/budke/img/mp_kachel.png') center center; */
}

.navbar-brand > img {
	width: 300px;
	height: auto;
	padding: .5em;
	transition: all ease-in-out 300ms;
}

body.shrink .navbar-brand > img {
	width: 175px;
	height: auto;
}

.bigpadding {
	padding-top: 120px;	
}

button.menutoggler {
    z-index: 100;
    width: 40px;
    height: 40px;
    background: url(../img/burger.png) center center no-repeat;
    background-size: cover;
    opacity: .75;
    transition: all ease-in 200ms;
}

button.menutoggler:hover {
    opacity: 1;
}

.btn-closing {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    color: #fff !important;
    background: url(../img/burger_close.png) center center no-repeat !important;
    background-size: 90% !important;
    position: relative !important;
}

.btn-closing::after {
    content:"";
    display: block;
    width: 36px;
    height: 36px;
    top: -3px !important;
    left: -3px !important;
    box-shadow: 0 0 0 2px #fff;
    border-radius: 50%;
    color: #fff;
    position: absolute;
}

.offcanvas-backdrop::before {
    display: none;
}

.offcanvas,
.dashboard_menu {
    background: rgba(82,82,82,.9);
    backdrop-filter: blur(6px);
}

.offcanvas-header {
    padding: 2rem 0 0 2rem !important;
}

.offcanvas-body {
    padding: 0 1rem;
    overflow-y: visible;
}

section {
	scroll-margin-top: 100px;
	/* background: url('https://system-werbung.com/dev/budke/wp-content/themes/budke/img/mp_kachel.png') center center;
	background-attachment: fixed; */
}

.page-id-3 .site-main ul li {
	margin-bottom: 1.5em;
}

.page-id-3 .site-main ul li:first-child {
	margin-top: 1em;
}

.page-id-3 .site-main ul ol li {
	margin-bottom: .75em;
}

.page-id-3 section,
.page-id-530 section {
	border: 1px solid transparent;
}


/*** Menü START ***/

.menu-hauptmenue-container {
	display: flex;
	justify-content: center;
}

ul#primary-menu {
    font-size: 1em;
    font-style: normal;
	display: flex;
	margin: 0;
}

body.shrink ul#primary-menu {
    font-size: .9em;
}	
	
ul#primary-menu > li,
ul#primary-menu > li a {
	position: relative;
}

ul#primary-menu > li:nth-child(1) > a::after,
ul#primary-menu > li:nth-child(2) > a::after {
	content: "\f078";
	font: var(--fa-font-solid);
	position: absolute;
	top: 50%;
	right: -15px;
	transform: translatey(-50%);
	font-size: .75em;
}

ul#primary-menu > li a {
    display: block;
    color: var(--darkjewelcolor);
    text-transform: uppercase;
    font-weight: 300;
    padding: 0.5em;
    margin-right: 2em;
}

ul#primary-menu > li:nth-child(n+3) a {
    margin-right: .75em;
}

ul#primary-menu > li > a.active,
ul#primary-menu > li:hover > a {
    font-weight: 600;
}

.showme {
    border: 1px solid red;
}

/*** Untermenü START ***/


nav li .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	margin-left: 0;
  	visibility: hidden;
  	height: 0;
  	z-index: 100;
    font-size: .9em;
	animation-name: menu-animation-backwards;
	animation-duration: 800ms;
	animation-fill-mode: backwards;
}

nav li .sub-menu li { 
  	display: block; 
}
 
/** Show the submenu on hover, focus **/
nav li:hover .sub-menu,
nav li:active .sub-menu, 
nav li:focus .sub-menu { 
	visibility: visible;
	height: auto;
}

nav .sub-menu li {
    width: 250px;
}

nav .sub-menu li a {
    text-transform: none !important;
    display: block;
	font-size: .85em;
	padding: 0.75em !important;
    color: var(--darkjewelcolor) !important;
    background: #E6E6E6;
	position: relative;
	box-shadow: 0 4px 4px 0px rgba(50, 50, 50, .25);
}

nav .sub-menu li a:active,
nav .sub-menu li a:focus,
nav .sub-menu li a:hover
{
    text-shadow: 1px 0 0 #fff;
	color: #fff !important;
	background: var(--darkjewelcolor);
}

nav .sub-menu li a::before {
    content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    background: var(--lightjewelcolor);
	z-index: -1;
}




/*
nav .submenu {
	list-style: none;
    animation-name: menu-animation-forwards;
	animation-duration: 1400ms;
	animation-fill-mode: forwards;
}
*/


/*
@keyframes menu-animation-forwards {
	0% {top: 0; opacity: 1; z-index: 100; overflow: visible; }
    95% {top: 3.15em; opacity: 1; z-index: 100; overflow: visible; }
	100% {top: 3.15em; opacity: 1; z-index: 100; overflow: visible; }	
}

@keyframes menu-animation-backwards {
	0% {top: 3.15em; opacity: 1; z-index: 100; overflow: visible;}
    5% {top: 3.15em; opacity: 1; z-index: 100; overflow: visible;}
	100% {top: 0; opacity: 1; z-index: 100; overflow: visible;}
}
*/


/*** Untermenu ENDE ***/

.shadowed {
    box-shadow: 2px 2px 5px 1px rgba(50,50,50,.5);
}


/* Off Canvas */

.offcanvas ul#primary-menu > li:nth-child(1) > a::after,
.offcanvas ul#primary-menu > li:nth-child(2) > a::after {
    display: none;
}

.offcanvas {
	top: 0;
	background: rgba(255,255,255,.9);
    box-shadow: 5px 0 10px rgba(50,50,50,.2);
	right: -330px;
	width: 330px;
	opacity: 0;
	visibility: visible;
	transition: all cubic-bezier(0.06, 0.93, 0.68, 0.97) 500ms;
}

.offcanvas ul#primary-menu {
    display: flex;
	flex-direction: column;
	position: relative;
}

.offcanvas ul#primary-menu > li a {
    color: var(--darkjewelcolor);
    text-transform: uppercase;
    font-weight: 300;
    padding: .25em .65em .25em .65em;
    margin-left: .75em;
}

.offcanvas ul#primary-menu > li > a.active,
.offcanvas ul#primary-menu > li:hover > a {
    font-weight: 600;
}

.offcanvas ul#primary-menu li ul {
    display: block;
    line-height: 2em;
    position: relative;
    font-size: .75em !important;
    width: 100%;
    margin: 0 0 0 1em;
    top: 0 !important;
}

.offcanvas ul#primary-menu > li ul a {
    color: var(--darkjewelcolor);
    white-space: nowrap;
}

.offcanvas ul#primary-menu > li ul a:hover {
    background: var(--lightjewelcolor);
}

.offcanvas .sub-menu {
	display: none !important;
}


.offcanvas.opened {
	right: 0;
	opacity: 1
}

.ctoggleholder {
    top: 60px;
    right: 17px;
    position: fixed;
    width: 45px;
    z-index: 9999;
    background: var(--darkjewelcolor);
    padding: 0 .275em;
}

.ctoggleholder:before,
.ctoggleholder:after,
.ctoggleholder div {
  background: #fff;
  content: "";
  display: block;
  height: 3px;
  border-radius: 3px;
  margin: 6px 0;
  transition: 0.5s;
}

.ctoggleholder.knock {
    background: transparent;
}

.ctoggleholder.knock:before {
  	transform: translateX(-3px) translateY(9px) rotate(135deg);
	background: var(--darkjewelcolor);
}
.ctoggleholder.knock:after {
  	transform: translateX(-3px) translateY(-9px) rotate(-135deg);
	background: var(--darkjewelcolor);
}
.ctoggleholder.knock div {
	transform: scale(0);
	background: var(--darkjewelcolor);
}

.sensitivbackground {
    position: absolute;
    width: 0;
    top: 0;
    bottom: 0;
    left: 0;
	transition: all ease-in 200ms;
}

.sensitivbackground.triggered {
    width: 100%;
}


/* SWIPER */

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
	  background-size: cover;
      background-position: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .swiper {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .mySwiper21, .mySwiper22, .mySwiper23, .mySwiper24, .mySwiper25, .mySwiper26, .mySwiper27, .mySwiper28, .mySwiper29 {
      height: 80% !important;
      width: 100%;
    }

    .mySwiper1, .mySwiper2, .mySwiper3, .mySwiper4, .mySwiper5, .mySwiper6, .mySwiper7, .mySwiper8, .mySwiper9 {
      height: 20% !important;
      box-sizing: border-box;
      padding: 10px 0;
    }

    .mySwiper1 .swiper-slide, .mySwiper2 .swiper-slide, .mySwiper3 .swiper-slide, .mySwiper4 .swiper-slide, .mySwiper5 .swiper-slide, .mySwiper6 .swiper-slide, .mySwiper7 .swiper-slide, .mySwiper8 .swiper-slide, .mySwiper9 .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

    .mySwiper1 .swiper-slide-thumb-active, .mySwiper2 .swiper-slide-thumb-active, .mySwiper3 .swiper-slide-thumb-active, .mySwiper4 .swiper-slide-thumb-active, .mySwiper5 .swiper-slide-thumb-active, .mySwiper6 .swiper-slide-thumb-active, .mySwiper7 .swiper-slide-thumb-active, .mySwiper8 .swiper-slide-thumb-active, .mySwiper9 .swiper-slide-thumb-active {
      opacity: 1;
    }

/* Swiper END */



.mySwiper2 .swiper-wrapper .swiper-slide span.swiper-caption {
    padding: .25em 1.5em;
    font-size: 1.8em;
    font-family: 'helvetica_neue_lt_std75_bold';
    background: rgba(255,255,255,.85);
    text-transform: uppercase;
    color: var(--darkjewelcolor);
    box-shadow: 0 0 5px 5px rgba(50,50,50,.4);
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.headerimage .bgimage {
    position: relative;
    min-height: 75vh;
    overflow: hidden;
}

.headerimage .bgimage.narrow {
    min-height: 35vh;
}

.headerimage .bgimage div {
    position: absolute;
	font-size: 3.2em;
	line-height: 1.15em;
	text-transform: uppercase;
    bottom: 8%;
    left: 5%;
    color: #fff;
}

.headerimage .bgimage div span {
	font-family: 'helvetica_neue_lt_std75_bold';
}

.headerimage .bgimage img {
    object-fit: cover;
}

.headerline {
    font-size: 3.4em;
    text-transform: uppercase;
    color: #fff;
    width: 50%;
    line-height: 1.25em;
    letter-spacing: 0.1em;
    background: rgba(50,50,50,.65);
}

ul.joblist {
    margin-left: 1.5em;
}

ul.joblist > li {
    position: relative;
    margin-bottom: .5em;
}
    
ul.joblist > li > svg {
    position: absolute;
    left: -1.5em;
    top: .25em;
    fill: var(--darkjewelcolor);
}

.features-tab-content-wrap ul,
ul.list-checked,
.card-body ul {
	margin-left: 2em;
	margin-top: 1.75em;
}

.features-tab-content-wrap ul li,
ul.list-checked li,
.card-body ul li {
	position: relative;
	padding: .205em 0;
	font-weight: 400;
}

.features-tab-content-wrap ul li::before,
ul.list-checked li::before,
.card-body ul li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-size: 1.3em;
    position: absolute;
    left: -42px;
    top: 1px;
    /* transform: translateY(-50%); */
    color: var(
    --darkjewelcolor);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.fliesscontent p:nth-last-child(n+2) {
	margin-bottom: 0;
}

.kontaktformular h4 {
    color: #fff;
}

section#leistungen h2 {
	display: none;
}


section:nth-child(4) > .container {
	margin-bottom: 0 !important;
}

section:nth-child(8) > div > div > div:first-child {
    padding: 0 !important;
}

section:nth-child(8) > div > div > div:last-child {
    background: var(--lightjewelcolor);
}

section:nth-child(8) {
	border: 1px solid transparent;
}


/* ASP ausblenden */
section:nth-child(9) > div:nth-child(4) {
    display: none;
}


img.fitted {
    object-fit: cover;
	width: 100%;
	height: 100%;
}


.jobvielfalt .iconbutton {
    font-size: 1.4em;
}

/* Splide Slider */

.splide__slide {
	position: relative;
	display: flex;
}

.splide__slide img {
	object-fit: cover;
	width: 100%;
}

.gallery .splide__slide {
	max-height: 65vH;
	width: 100%;
	overflow: hidden;
}

.gallery .splide__slide img {
	object-fit: cover;
	max-height: 65vw;
}

.splide__slide .slidercaption {
    position: absolute;
    bottom: 50px;
    right: 100px;
    background: rgba(255,255,255,.75);
    color: var(--darkjewelcolor);
    font-size: 2.0em;
	font-weight: 300;
    padding: .25em .5em;
}


/* News Kacheln */

.startkacheln {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-bottom: 2em;
}

.kachel {
	flex: 0 0 30%;
	background: #fff;
	color: #121212;
	margin: 0 3% 3% 0;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	transition: all ease-out 300ms;
}

.kachel:hover {
	transform: scale(1.025);
	box-shadow: 0 0 10px 8px rgba(255 255 255 / .25);
	cursor: crosshair;
}

.kachelimage {
	position: relative;
}

.kachelimage img {
	max-width: 100%;
	height: auto;
	display: block;
}

.kachelimage h3 {
	background: var(--darkjewelcolor);
    color: white;
    font-size: .9em;
    padding: .25em .75em;
	margin: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 4;
}

.kachelcontent {
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: .9em;
    padding: 0 1.25em 1.25em 1.25em;
}

.kachelcontent h3 {
    hyphens: auto;
    font-size: 1.4em;
}

.kachelcontent p {
    hyphens: auto;
	font-size: .9em;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}

a.backlink,
.nav-previous > a,
.nav-next > a,
.kachelcontent a {
    border-radius: 0 !important;
    background: var(--standardjewelcolor) !important;
	border-radius: 10px !important;
	font-size: .9em !important;
    color: #fff !important;
    padding: .35em .65em !important;
	align-self: flex-end;
}

a.backlink:hover,
.nav-previous > a:hover,
.nav-next > a:hover,
.kachelcontent a:hover {
    background: var(--darkjewelcolor) !important;
    color: #fff !important;
}

.nav-previous > a,
.nav-next > a {
	display: flex;
	flex-direction: column;
	margin: 1.5em 0;
}

.nav-previous > a span,
.nav-next > a span {
	hyphens: auto;
}

.nav-subtitle {
	font-size: .75em;
}

a.backlink svg,
.kachelcontent a > svg {
    font-size: .65em !important;
	fill: var(--darkjewelcolor);
}

a.backlink:hover svg,
.kachelcontent a:hover > svg {
	fill: white;
}



/* Projekte Filter */

ul.filter-tab {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.filter-tab li {
    display: flex;
	align-items: center;
	justify-content: center;
    margin: 0 .75em .75em 0;
	font-weight: 500;
	font-size: .95em;
	line-height: 1.25em;
	text-align: center;
    box-shadow: 0 0 0 1px var(--darkjewelcolor);
	color: var(--darkjewelcolor);
	border-radius: 2px;
    padding: .25em 1em;
	text-transform: uppercase;
}

ul.filter-tab li:hover {
	cursor: pointer;
	box-shadow: 0 0 0 2px var(--darkjewelcolor);
}

ul.filter-tab li.mixitup-control-active {
    background: var(--darkjewelcolor);
    color: #fff;
}

ul.filter-gallery li a h5 {
	margin-top: .75em;
}

ul.filter-gallery li a {
    height: 350px;
    background: var(--lightjewelcolor);
    display: flex;
    flex-direction: column;
	transition: all ease-in-out 300ms;
}

ul.filter-gallery li:hover a {
    transform: scale(1.05);
	cursor: pointer;
}

ul.filter-gallery li a img {
    object-fit: cover;
    max-height: 200px;
}

ul.filter-gallery li a h5 {
	color: var(--darkjewelcolor);
	text-transform: uppercase;
}

ul.filter-gallery li a span.kategorie {
	position: absolute;
	left: 20px;
	top: 20px;
	padding: .125em .5em;
	border-radius: 4px;
	font-weight: 500;
	font-size: .75em;
	text-transform: uppercase;
	color: var(--darkjewelcolor);
	background: #fff;
}

ul.filter-gallery li a span.iconbutton {
	position: absolute;
	right: 24px;
	bottom: 20px;
	padding: .25em .75em .25em 1.75em;
	font-size: .85em !important;
}

ul.filter-gallery li a span.iconbutton::before {
	display: none;
}

ul.filter-gallery li a span.iconbutton svg {
    fill: #fff;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

ul.filter-gallery li a span.iconbutton:hover svg {
    fill: #fff;
}



/* Projekte Lightbox */

.referenzen:hover {
	cursor: pointer;
}

.referenzen > div > div {
	overflow: hidden;
}

.referenzen > div > div > img {
	transition: all ease-in 300ms;
}

.referenzen > div > div > img:hover {
	filter: blur(2px);
}

#projekthalter {
    display: none;
    height: 100vh;
    position: fixed;
    background: rgba(255,255,255,.9);
    top: 0;
    left: 0;
    z-index: 9999999;
}

.projekt {
	background: var(--lightjewelcolor);
	display: none;
}

.projekt h3 {
	color: var(--darkjewelcolor);
}

.projekt a.windowcloser {
	display: block;
	position: absolute;
	top: -10px;
	right: -10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #121212;
	box-shadow: 0 0 0 2px #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.projekt a.windowcloser svg {
	fill: #fff;
	font-size: 1.5em;
	transition: all ease-in 300ms;
}

.projekt a.windowcloser:hover svg {
	transform: scale(1.125) rotate(180deg);
}

.projekt.activated {
	display: block;
}



#filterbuttons {
	scroll-margin-top: 180px;
}

.projekt h2 {
	font-size: 1.8em;
}

.projekt h3 {
	font-weight: 500;
}

.projekt ul {
	margin-top: .25em;
	margin-left: .75em;
}

.projekt ul li svg {
	position: absolute;
	left: -15px;
	top: 50%;
	transform: translatey(-50%);
	font-size: .65em;
	fill: #fff;
}

.projekt > div {
    /* box-shadow: 0 0 30px 5px rgba(255,255,255,.20); */
}

#projekthalter .swiper-slide-thumb-active {
	position: relative;
}

#projekthalter .swiper-slide-visible::after {
	content:"";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: inset 0 0 0 0 #fff;
	transition: all ease-in-out 300ms;
}

#projekthalter .swiper-slide-thumb-active::after {
	content:"";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    box-shadow: inset 0 0 0px 3px #fff;
}

#projekthalter .swiper-slide-visible:hover {
	cursor: pointer;
}

#sliderHeader .splide__pagination {
	display: none;
}

#sliderHeader {
	max-height: calc(100vH - 75px);
	overflow: hidden;
}

#sliderHeader .splide__track,
#sliderHeader .splide__list,
#sliderHeader .splide__slide {
	max-height: calc(100vH - 75px);
}


ul.bycategories {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style: none;
	font-size: 1.4em;
	margin: 0 0 1.5em 0;
    padding: 0;
}

ul.bycategories li {
	margin-right: 1.25em;
	position: relative;
}

ul.bycategories a::before {
    content: "\f07b";
    font-family: "Font Awesome 5 Free";
    font-size: 1.1em;
    position: absolute;
    color: #97d2d4;
    top: .15em;
    left: .7em;
    z-index: 1;
    transition: all ease-in 300ms;
}

ul.bycategories li.current-cat a::before {
	color: #fff;
}

ul.bycategories li {
	font-size: .65em;
	position: relative;
}

ul.bycategories li::after {
	position: absolute;
	content: "Beiträge";
	bottom: 0;
	left: 1.5em;
}

ul.bycategories a {
    color: var(--darkjewelcolor);
    box-shadow: 0 0 0 1px var(--darkjewelcolor);
    text-decoration: none;
    font-size: 1.35em;
    padding: .25em 1.25em .25em 2.5em;
    position: relative;
    transition: all ease-in 300ms;
    display: block;
    margin-bottom: .25em;
}

ul.bycategories a:active,
ul.bycategories a:hover,
ul.bycategories li.current-cat a {
	color: #fff;
	background: var(--darkjewelcolor);
}

a.more-link {
	display: none;
}

ul.post-categories {
    list-style: none;
    display: inline-block;
    margin: 0;
}

ul.post-categories a {
    color: var(--darkjewelcolor);
}

.list-group {
	flex-direction: row;
	border-radius: 0 !important;
	padding: 0 !important;
}

.list-group-item {
	display: inline-block;
	background: none;
	border: none;
	border-radius: 0 !important;
}

.list-group-item.active {
    background: none;
    border-color: none;
}

.sprung {
    scroll-margin-top: 110px;
}

.codedropz-upload-inner {
    white-space: wrap !important;
}

.codedropz-upload-inner h3 {
    line-height: 1.25em;
	font-size: 26px !important;
}


/* Accordions */

.accordion-body {
    padding: 0 .85rem .2rem 1.25rem;
}

.line-ul ul {
	margin: 0;
	padding: 0.75em 1em;
	list-style: square;
}

.line-ul ul li::marker {
	color: var(--darkjewelcolor);
}

.accordion-item {
    border: none !important;
}

.accordion-header > .accordion-button {
    background: var(--darkjewelcolor);
    color: #fff;
    font-size: .65em;
    line-height: 1.2em;
    font-weight: 200;
}

.jeweltext {
	font-size: 1.2em;
	color: var(--darkjewelcolor);
}

.page-id-15 .accordion-header > .accordion-button,
.page-id-19 .accordion-header > .accordion-button {
    padding-left: 1.25rem;
}

.accordion-header > .accordion-button:focus {
    box-shadow: none !important;
}

.accordion-header > .accordion-button img {
    position: absolute;
    left: 4px;
	bottom: 0;
    width: 68px;
    height: 68px;
    z-index: 4;
    transition: all ease-in 200ms;
}

.accordion-header > .accordion-button small {
    position: absolute;
    right: 3.5em;
    bottom: .58em;
}

.accordion-header > .accordion-button:hover img {
    bottom: 10px;
}

.accordion-collapse {
    box-shadow: inset 0 0px 0 1px var(--darkjewelcolor);
}

.accordion-button::after {
    filter: brightness(20);
}

#accordionFlushExample > div {
	background: transparent;
}

.speech {
    box-shadow: 0 0 0 2px #97d2d4;
    padding: .35em .5em;
    font-size: 1.4em;
    color: var(--darkjewelcolor);
    line-height: 1.25em;
    margin-top: .85em;
    margin-bottom: 1.5em;
    position: relative;
    hyphens: auto;
}

.speech > img {
    position: absolute;
    background: linear-gradient(90deg, transparent 25%, #fff 26%, #fff 94%, transparent 95%);
    bottom: -38px;
    right: 20px;
    width: 30px;
    height: auto;
    z-index: 2;
}

.grounded {
    background: var(--darkjewelcolor);
    padding: .65em .5em .25em .5em;
}

.grounded .speech {
    color: #fff;
    margin: 0 auto  1.5em auto;
    max-width: 65%;
}

.mobilecontent .grounded .speech {
    max-width: 100%;
}

.grounded .speech > img {
    background: linear-gradient(90deg, transparent 25%, #3a7b91 26%, #3a7b91 94%, transparent 95%);
    bottom: -38px;
    right: auto;
    left: 20px;
    transform: scaleX(-1);
}

.grasgreen .speech > img {
    background: linear-gradient(90deg, transparent 25%, #337c2c 26%, #337c2c 94%, transparent 95%);
    bottom: -38px;
    right: auto;
    left: 20px;
    transform: scaleX(-1);
}

.grounded .name {
    text-transform: uppercase;
    font-size: 1.4em;
    display: block;
}

.grounded .profession {
    font-size: .85em;
}

.grasgreen {
    background: var(--lightjewelcolor);
}

.grasgreen .speech {
    box-shadow: 0 0 0 2px #fff;
}

.thegradient > img {
	background: var(--lightjewelcolor);
}


.white_text {
    color: #fff;
}

.halfpic {
    height: 250px;
    overflow: hidden;
    display: block;
    margin-top: 10px;
	background: none;
}

.doublepic {
    object-fit: cover;
    align-self: center;
}

.lightgrounded {
    background: #dae1e7;
}

.fixed310 {
    flex: 0 0 310px !important;
    width: 310px !important;
}

.bolder {
    font-weight: 500;
}

.asptitle {
    text-transform: uppercase;
    font-size: 1.2em;
}

.cardcontent {
    font-size: .75em;
    line-height: 1.25em;
}

.cardname {
    display: block;
    font-size: 1.35em;
	line-height: 1.25em;
}


/* Kachelwechsler Top Home START */


.features-tab-area .nav-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
	padding: 0 1.5em;
}

.features-tab-area .nav-pills li button {
    width: 100%;
    font-size: 20px;
    padding: 0;
    padding-bottom: 25px;
    font-weight: 500;
    color: #666666;
	background: var(--lightjewelcolor);
    border-radius: 0;
    position: relative;
}

.multiverse > span,
.features-tab-area .nav-pills li button span {
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(58,123,145,.75);
	hyphens: auto;
	min-height: 72px;
    color: #fff;
    font-size: 1.1em;
    font-weight: 300;
	line-height: 1.2em;
    padding: .25em;
    letter-spacing: 0.025em;
    transition: all ease-in 100ms;
	display: flex;
	align-items: center;
	justify-content: center;
}

.multiverse > span {
	top: 0;
	bottom: auto;
	text-align: center;
}

.features-tab-area .nav-pills li button:hover span {
    background: rgba(58,123,145,1);
}

.features-tab-area .threeofthem .nav-pills li button span {
    background: var(--dunkelgrau);
}

.features-tab-area .threeofthem .nav-pills li button.nav-link.active span {
	background: var(--darkjewelcolor);
}

.features-tab-area .threeofthem .nav-pills li button.nav-link img {
	max-width: 290px;
}

.multiverse span.grasgreen {
    background: #ffffff;
	color: var(--darkjewelcolor);
	box-shadow: inset 0 0 0 1px var(--darkjewelcolor);
	padding: .25em .75em;
}

.features-tab-area .threeofthem .nav-pills li button:hover span {
    background: var(--darkjewelcolor);
}

.features-tab-area .kontaktform .nav-pills li button {
    background: #555;
    color: #fff;
    line-height: 1.1em;
}

.features-tab-area.thelessmargin .nav-pills li button {
      background: #555;
}

.features-tab-area.thelessmargin .nav-pills li button {
      padding: 0 !important;
}

.features-tab-area .nav-pills li button.active {
        background: var(--lightjewelcolor);
        color: #fff;
}

.features-tab-area .nav-pills li button.active img {
       /* filter: brightness(200); */
}


#ernaehrung .features-tab-area .nav-pills li button.active {
        background: #fcc00e;
        color: #555;
}

#bkg_changer.features-tab-area .nav-pills li button.active {
        background: #fcc00e;
        color: #555;
}

#bkg_changer.features-tab-area .tab-content {
    padding: 10px 0 0;
    border: none;
    background: none; 
}

.features-tab-area .kontaktform .tab-content {
    padding: 25px;
    border: none;
}

.features-tab-area.thelessmargin .tab-content {
        padding: 0;
        border: 0;
}

.features-tab-area .tab-content .features-tab-content-wrap .features-box-wrap .single-features-box {
      position: relative;
      text-align: center;
      padding: 0 30px; }
      .features-tab-area .tab-content .features-tab-content-wrap .features-box-wrap .single-features-box .features-box-icon {
        display: flex;
        justify-content: center;
        margin-bottom: 40px; }
        .features-tab-area .tab-content .features-tab-content-wrap .features-box-wrap .single-features-box .features-box-icon .features-box-icon-inner {
          height: 160px;
          width: 160px;
          background: #666666;
          display: flex;
          justify-content: center;
          align-items: center; }
      .features-tab-area .tab-content .features-tab-content-wrap .features-box-wrap .single-features-box .features-box-content h3 {
        font-size: 28px;
        margin-bottom: 0; }
      .features-tab-area .tab-content .features-tab-content-wrap .features-box-wrap .single-features-box .sep {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%; }
.features-tab-area-offer {
  padding: 100px 0; }
  .features-tab-area-offer .nav-pills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 20px;
    margin-bottom: 0 !important; }
    .features-tab-area-offer .nav-pills li button {
      width: 100%;
      background: #DFDFDF;
      font-size: 23px;
      line-height: 65px;
      padding: 0 20px;
      font-weight: 700;
      color: #666666;
  
      border-radius: 0; }
      .features-tab-area-offer .nav-pills li button.active {
        background: #ffc600;
        color: #fff; }
  .features-tab-area-offer .tab-content {
    padding: 50px;
    border: 5px solid #ffc600; }
    .features-tab-area-offer .tab-content .features-tab-content-wrap .f-tab-content-title {
      font-size: 36px;
      text-align: center;
      margin-bottom: 20px; }
      .features-tab-area-offer .tab-content .features-tab-content-wrap .f-tab-content-title span {
        text-decoration: underline; }
    .features-tab-area-offer .tab-content .features-tab-content-wrap .f-tab-content-list {
      margin-bottom: 30px; }
      .features-tab-area-offer .tab-content .features-tab-content-wrap .f-tab-content-list li {
        font-size: 24px; }
    .features-tab-area-offer .tab-content .features-tab-content-wrap .features-box-wrap .single-features-box {
      position: relative;
      text-align: center;
      padding: 0 30px; }
      .features-tab-area-offer .tab-content .features-tab-content-wrap .features-box-wrap .single-features-box .features-box-icon {
        display: flex;
        justify-content: center;
        margin-bottom: 40px; }
        .features-tab-area-offer .tab-content .features-tab-content-wrap .features-box-wrap .single-features-box .features-box-icon .features-box-icon-inner {
          height: 160px;
          width: 160px;
          background: #666666;
          display: flex;
          justify-content: center;
          align-items: center; }
      .features-tab-area-offer .tab-content .features-tab-content-wrap .features-box-wrap .single-features-box .features-box-content h3 {
        font-size: 28px;
        margin-bottom: 0; }
      .features-tab-area-offer .tab-content .features-tab-content-wrap .features-box-wrap .single-features-box .sep {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
}

.features-tab-content-wrap h3 {
	hyphens: auto;
}

/* Liste Leistungen in Content-Kacheln */

ul.punkteliste {
	margin: 1em 0 0 2em;
	list-style: none;
}

ul.punkteliste li {
	position: relative;
	margin-bottom: .75em;
	color: var(--darkjewelcolor);
	font-weight: 400;
}

ul.punkteliste li::before {
	content: "\f164";
	font: var(--fa-font-solid);
	position: absolute;
	top: 50%;
	left: -40px;
	transform: translatey(-50%);
	font-size: 1em;
	font-weight: 400;
	color: var(--darkjewelcolor);
}

ul.punkteliste.plant li::before {
	content: "\f5bb";
	font: var(--fa-font-solid);
}

ul.punkteliste.seed li::before {
	content: "\f4d8";
	font: var(--fa-font-solid);
}

ul.punkteliste.leaf li::before {
	content: "\f06c";
	font: var(--fa-font-solid);
}

.morebutton {
    border-radius: 0 !important;
    background: var(--darkjewelcolor) !important;
    color: #fff;
    padding: .75em !important;
    border: none !important;
    height: 100% !important;
    font-size: 1em !important;
    position: relative !important;
    box-shadow: 0 2px 0 rgba(255,255,255,.4);
}

.morebutton:focus,
.morebutton:active,
.morebutton:hover {
    color: rgba(255,255,255,.65);
}

.threeofthem .morebutton {
    background: var(--darkjewelcolor) !important;
	position: relative;
}


.threeofthem a.morebutton.collapsed::after {
    content: "\f078";
    font: var(--fa-font-solid);
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translatey(-50%);
    font-size: 1em;
}

.threeofthem a.morebutton::after {
    transform: translatey(-50%) rotate(90deg);
}


/* Position of tile arrow down */

.features-tab-area button.nav-link::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3px 3px 0 3px;
    border-color: #3a7b91 transparent transparent transparent;
	opacity: 0;
    transition: all ease-in 200ms;
    z-index: 1;
}

.features-tab-area .threeofthem button.nav-link::before {
    border-color: var(--darkjewelcolor) transparent transparent transparent;
}

.features-tab-area button.nav-link.active::before {
	border-width: 30px 30px 0 30px;
    bottom: -30px;
	opacity: 1;
}

.multiverse {
    position: relative;
}

.card {
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.card-body {
    padding: 0;
}

.card-body h3 {
    hyphens: auto;
}

.card-body .col-12 a {
	color: var(--darkjewelcolor);
	font-size: 500;
}

.card-img, .card-img-top {
    border-radius: 0;
}

.card-title {
    background: #555;
    color: #fff;
}

.card-title-color {
    color: #fff;
}

.card-text-block  {
  position: relative;
  bottom: 90%;
  left: 10%;
  background-color: darkorange;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

/* Kachelwechseler Top Home END */


/* Kachelwechsler 2 drei Kacheln */


.ffpctwidth {
	flex: 0 0 50%;
}

.iconbutton {
    font-size: .85em;
    padding: .25em .75em .25em 2.75em;
    background: var(--standardjewelcolor);
    color: #fff;
    position: relative;
    transition: all ease-in 200ms;
}

.download_list .iconbutton {
    font-size: 1.1em;
	padding: 0.25em 0.75em;
	background: var(--lightjewelcolor);
	color: var(--darkjewelcolor);
}

.iconbutton:hover {
    color: #fff;
	background: var(--darkjewelcolor);
}

.download_list img {
	max-width: 80%;
	height: auto;
	box-shadow: 3px 3px 4px 0 rgba(40,40,40,.3);
	margin-bottom: .5em;
}

.download_list .iconbutton:hover {
	background: var(--darkjewelcolor);
}

.download_list span {
    display: inline-block;
    line-height: 1.25em;
    hyphens: auto;
    font-size: 0.75em;
}

.download_list span span {
	font-size: 1.25em;
}

.iconbutton::before {
    background: var(--darkjewelcolor);
    content:"";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    z-index: -1;
    transition: all ease-in 200ms;
}

.iconbutton:hover::before {
    width: 100%;
    height: 100%;
    transform: none;
}

.iconbutton svg {
    position: absolute;
    left: 10px;
    fill: var(--darkjewelcolor);
    width: 28px;
    height: 28px;
    z-index: 4;
}

.iconbutton:hover svg {
    fill: #fff;
}

.bildstreifen .iconbutton svg {
    width: 11%;
    height: auto;
    top: 50%;
	left: 9%;
	transform: translateY(-50%) translateX(-50%);
}

.asp .iconbutton {
    font-size: .85em;
    display: block;
    box-shadow: 0 0 0 1px var(--darkjewelcolor);
    margin-bottom: 10px;
    color: #fff;
    background: var(--darkjewelcolor);
}

.asp .iconbutton::after {
    width: 40px;
}

.asp .iconbutton svg {
    left: 8px;
    top: 8px;
    width: 22px;
    height: 22px;
    transition: all ease-out 200ms;
}

.asp .iconbutton:hover svg {
    transform: scale(1.25);
}

.asps span {
    font-weight: 400;
    font-size: 1.2em;
	line-height: 1.2em;
    color: var(--darkjewelcolor);
}

.asps p {
    margin: 0 0 1em 0;
	 font-size: 1em;
    color: var(--darkjewelcolor);
}

.ansprechpartner {
	display: none;
}

.ansprechpartner .iconbutton {
	display: block;
	margin-bottom: .5em;
	padding: .25em .75em .25em 3.5em;
	background: #045b8ebf;
}

@media screen and (max-width: 767px) {
	.iconbutton svg {
		width: 20px;
		height: 20px;
	}
	ul#primary-menu > li a {
		font-size: .95em !important;
	}
}

@media screen and (max-width: 1200px) {
	.features-tab-area .nav-pills li button {
		padding-bottom: 32px;
	}
}

@media screen and (max-width: 991px) {
	.ansprechpartner .iconbutton {
		padding: .5em .75em .5em 2.95em;
	}
	.features-tab-area .nav-pills li button {
		padding-bottom: 0;
	}
	.offcanvas ul#primary-menu > li a {
		margin-bottom: 1em;
	}
	.threeofthem .morebutton {
		min-height: 4.5em;
		display: flex;
		align-content: center;
	}
	
	.card-body .morebutton::before {
		content: "";
		display: block;
		position: absolute;
		bottom: -27px;
		left: 50%;
		transform: translateX(-50%);
		width: 50px;
		height: 25px;
		border-style: solid;
		border-width: 30px 30px 0 30px;
		border-color: #213a8f #e4070700 transparent transparent;
		opacity: 1;
		transition: all ease-in 200ms;
		z-index: 2;
	}
	
	.card-body .morebutton.collapsed::before {
		bottom: -27px;
		opacity: 0;
	}
	
	.card.multiverse .morebutton > span:first-child  {
		width: 25%;
		height: 100%;
		background: #e5e5e5;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		padding-top: .75em;
		overflow: hidden;
	}

	section:nth-child(6) .card.multiverse .morebutton > span:first-child  {
		padding-top: .75em;
	}
	
	.card.multiverse .morebutton > span:last-child {
		margin-left: 27.5%;
		margin-right: 10%;
	}
	
	.card.multiverse .morebutton img.card-img-top {
		transform: scale(1.75);
	}
	
	.threeofthem .morebutton > .fixedicons {
		padding-top: 0 !important;
		display: flex;
		align-items: flex-end;
	}
	
	.threeofthem .morebutton > .fixedicons img {
		aspect-ratio: 1 / 1;
		transform: scale(1) !important;
	}
	
	section:nth-child(6) .card.multiverse .morebutton img.card-img-top {
		transform: none;
	}

}

@media screen and (max-width: 768px) {
	.splide__slide .slidercaption {
		bottom: 25px;
		right: 50px;
	}
	.morebutton {
		font-size: .85em !important;
	}
	.card.multiverse .morebutton > span:last-child {
		margin-right: 0;
	}
}


@media screen and (max-width: 575px) {
	.ansprechpartner .iconbutton {
		padding-left: 35px;
	}
	.iconbutton svg {
		left: 5px;
	}
	.offcanvas {
		right: 100%;
		width: 100%;
	}
	button.accordion-button {
		font-size: .85em !important;
	}
	.threeofthem .morebutton {
		font-size: 1.125em !important;
		line-height: 1.25em !important;
		min-height: 21.35vw;
	}
	section:nth-child(6) .card.multiverse .morebutton > span:first-child  {
		padding-top: .35em;
	}
	.download_list span {
		font-size: .80em;
	}
}


@media screen and (max-width: 450px) {
	.threeofthem .morebutton {
		font-size: 1em !important;
	}
}


.ansprechpartner .iconbutton:hover {
    background: #1482c3 !important;
}

.ansprechpartner .iconbutton::before {
    width: 18%;
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
	.ansprechpartner .iconbutton::before {
		width: 25%;
	}
	body.shrink .navbar-brand > img,
	.navbar-brand > img {
		width: 18vw;
	}
}

@media screen and (max-width: 1290px) {
	.multiverse > span, .features-tab-area .nav-pills li button span {
		font-size: 1em;
	}
}


@media screen and (max-width: 1240px) {
	ul#primary-menu > li a {
		font-size: .85em;
	}
}

@media screen and (max-width: 1024px) {
	ul#primary-menu > li a {
		font-size: .75em;
	}
	body.shrink .offcanvas ul#primary-menu {
    	font-size: 1em !important;
	}
}

.firmendaten {
    background: var(--darkjewelcolor);
}

.firmendaten h3, .firmendaten h4 {
    color: #fff;
}

.firmendaten h3 {
    font-family: 'helvetica_neue_lt_std75_bold';
    margin: 0;
}

.firmendaten h4 {
    font-size: 1.2em;
    font-weight: 200;
    margin: 0;
}

.bildstreifen .col-auto {
    flex: 1 0 auto !important;
}

.bildstreifen .bgcover {
	min-height: 400px;
	border: 1px solid transparent;
}

ul.list-normal {
	margin: 0;
}

ul.list-normal li {
	margin-bottom: .5em;
}

ul.list-normal li::before {
	content: "•";
}

.nachsatz {
	font-size: 1.25em;
}


/* Zitat Slider */

.swiper.mySwiper5 {
	height: 100%;
	padding: 0 40px;
}

.mySwiper5::before {
    content: "";
    display: block;
    position: absolute;
    width: 40px;
    top: 0;
    left: 0;
    bottom: 0;
    background: white;
    z-index: 5;
}

.mySwiper5::after {
    content: "";
    display: block;
    position: absolute;
    width: 40px;
    top: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 5;
}

.swiper-slide .person_data {
    flex: 0 0 40%;
}

.swiper-slide .person_data .layered {
	background: rgba(58,123,145,.85);
    padding: .65em .5em .25em .5em;
    color: white;
    line-height: 1.25em;
	text-align: left;
}

.layered .name {
    text-transform: uppercase;
    font-size: 1.4em;
    display: block;
}

.layered .profession {
    font-size: .85em;
}

.swiper-slide .person_holder .person_speech {
   	flex: 0 0 60%;
	background: #dae1e7;
	box-sizing: border-box;
}

.swiper-slide .person_holder .person_speech .speech {
    padding: .65em .5em;
    color: var(--darkjewelcolor);
	box-shadow: 0 0 0 2px var(--darkjewelcolor);
    line-height: 1.25em;
	font-size: 1.25em;
	text-align: left;
}

.swiper-slide .person_holder .person_speech .speech > img {
    background: linear-gradient(90deg, transparent 25%, #dae1e7 26%, #dae1e7 94%, transparent 95%);
    top: -38px;
	bottom: auto;
    left: 20px;
	right: auto;
	transform: scaley(-1);
}


/* Logo Section */

.logogrounds {
    
}

.logogrounds a {
    flex: 0 0 18%;
    background: #fff;
    box-shadow: 0 0 0 2px var(--darkjewelcolor);
    padding: 2% 0;
    margin: 1%;
    display: flex;
    justify-content: center;
}

.logogrounds a img {
    max-width: 85%;
    object-fit: contain;
}

.download_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.download_list li {
    margin-bottom: .85em;
}

.download_list li a {
    display: block;
}


/* MAP Section */

.page-id-365 #pills-tabContent {
	scroll-margin-top: 100px;
}

.page-id-365 ul.nav-pills {
	margin: 0;
	justify-content: center;
}

.page-id-365 .nav-pills .nav-link {
    background: #fff !important;
}

.page-id-365 .nav-pills .nav-link.active,
.page-id-365 .nav-pills .show > .nav-link {
    background: var(--darkjewelcolor) !important;
}

.page-id-365 .nav-pills .nav-link {
    border-radius: 0 !important;
	padding: .75em 1.5em !important;
	margin-right: .75em !important;
}

.page-id-365 .asptitle {
    font-size: 1.1em;
}

.map_and_info {
	display: flex;
}

.themap {
	flex: 0 0 60%;
	background: #9AD2D4;
}

.asptitle > img {
	width: 30px;
	height: auto;
	display: inline-block;
	margin: 0 0 5px 10px;
}

.asptitle > svg {
	margin-bottom: 5px;
	margin-right: 7px;
}

.theasp,
.theinfo {
    flex: 0 0 20%;
}

.theasp {
	background: #97d2d4;
}

.theinfo {
    background: #dae1e7;
}

.theinfo > .lightgrounded {
	scroll-margin-top: 100px;
	transition: all ease-out 300ms;
	display: none;
}

.theinfo > .lightgrounded:target {
	display: block;
}


/* Footer */

footer {
    background: var(--dunkelgrau);
	font-size: .85em;
}

.footerhead {
    font-weight: 600;
}

#menu-footer-menue-d {
	list-style: none;
	margin: 0;
}

#menu-footer-menue-d li {
	position: relative;
}