/*
 * Typographie
 * Color Links
 * Top Address
 * Footer Bottom
 * Menu
 * Class shadow
 *
 *
 * Hide Wordpress-Logo with Wordpress-Menu in admin bar Frontend
*/



/************** Typographie ***************/
/* H1 mit Linien */
.heading-lines {
    display: flex;
    align-items: center;
    gap: 18px;

    width: 100%;
		max-width: 1200px;
    margin: 0;
		padding: 0 15px;

    font-weight: 300;
    line-height: 1.2;
    white-space: nowrap;
}

.heading-lines::before,
.heading-lines::after {
    content: "";
    flex: 1;
    height: 2px;
    background: currentColor;
    opacity: 0.75;
}

@media(max-width:870px){
	.heading-lines{
		white-space: normal;
	}
}


/************** Color Links ***************/
.colorLink {
	position: relative;
	display: inline-block;

	color: #48639C;
	text-decoration: underline !important;
	cursor: pointer;

	transition: color .3s;
	z-index: 0;
}

.colorLink::before {
	content: "";
	position: absolute;
	z-index: -1;

	/* Erweitert den Hintergrund um den Text herum */
	inset: -1px -7px -3px;

	background: #48639C;
	border-radius: 999px;

	opacity: 0;
	transform: scaleX(.9);
	transition:
		opacity .3s,
		transform .3s;
}

.colorLink:hover {
	color: #FFFFFF !important;
}

.colorLink:hover::before {
	opacity: 1;
	transform: scaleX(1);
}

/* Top Address
--------------------------------------------- */

div#topAddress {
	text-align: center;
	background: #efefef;
}

div#topAddress a {
	color: #696969;
}

div#topAddress ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

div#topAddress li {
	display: inline-block;
	margin: 0 5px;
	font-size: 90%;
	white-space: nowrap;
}


/* Footer Bottom
--------------------------------------------- */

div#footerBottom {
	background: #4b5984;
	color: #FFF;
	font-size: 85%;
	padding: 30px 15px;
}

div#footerBottom a {
	color: #FFF;
}

div#footerBottom ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	text-align: center;
}

div#footerBottom li {
	display: inline-block;
	margin: 0 5px;
	white-space: nowrap;
}

div#footerBottom ul > li:not(:last-child)::after {
	content: '|';
	margin-left: 15px;
}

div#footerBottom li:last-child::after {
	content: '';
	margin-left: 0;
}


/************** Menu ***************/
li.menu-item a{
	transition: color 0.3s ease;
}
li.current_page_item a,
li.menu-item a:hover,
li.menu-item a:active{
	color: #FFF;
}


/* Menu
--------------------------------------------- */

/* Hover Effekt */
/*.bricks-element-nav-menu .bricks-nav-menu > li::before {*/
ul.bricks-nav-menu li::before{
	content: '';
	display: block;
    width: 0px;
    height: 0px;
    background-image: url('/wp-content/uploads/navi-deko.png');
	background-repeat: no-repeat;
	position: absolute;
	top: -8px;
	left: 0px;
	transition: all .5s;
}
/*.bricks-element-nav-menu .bricks-nav-menu > li:hover::before { */
ul.bricks-nav-menu li:hover::before{
	width: 14px;
  height: 14px;
	top: 8px;
	left: -16px;
}
ul.bricks-nav-menu li.current-menu-item::before { 
	width: 14px;
  height: 14px;
	top: 8px;
	left: -16px;
}	
/* Aktiver Eintrag bei Sitemap */
body.page-template-template-pebweb-sitemap li.current_page_item a{
	color: #FF94FD;
}


/************** Sections bei Behandlungen ***************/
.section-treatment{
	background: #F7F7F7;
	margin-bottom: 30px;
}
.section-treatment:nth-of-type(odd){
	background: #ECECEC;
}
.treatment{
	row-gap: 15px;
	margin: 30px 0;
}
.treatment__text img{
	display: flow-root;
	float: left;
	margin-right: 30px;
	margin-bottom: 30px;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
}
.treatment__price {
    display: grid;
    grid-template-columns: 125px 125px;
    width: max-content;
    /*margin-top: 25px;*/
    background: #FFF;
		box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
		border-radius: 8px;

}
@media(max-width:478px){
	.treatment__text img{
		clear: both;
		float: none;
		display: block;
		margin: 0 auto;
	}
}
.treatment__price span {
  padding: 4px 10px;
}
.treatment__toggle{
	transform: scale(0.85);
	cursor: pointer;
}
.treatment__more{
	display: inline-block;
	max-height: 0;
	overflow: hidden;
	transition: max-height 1s;
}
.treatment.is-open .treatment__more {
  max-height: 1200px;
}

/************** Animation der Startseiten Icons ***************/
/* Grundzustand */
.hero-block {
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* Links: kommt von links */
.hero-block:nth-child(1) {
  animation-name: hero-from-left;
}

/* Mitte: kommt von oben */
.hero-block:nth-child(2) {
  animation-name: hero-from-top;
  animation-delay: .15s;
}

/* Rechts: kommt von rechts */
.hero-block:nth-child(3) {
  animation-name: hero-from-right;
  animation-delay: .3s;
}


/* Animationen */

@keyframes hero-from-left {
  from {
    opacity: 0;
    transform: translateX(-180px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes hero-from-top {
  from {
    opacity: 0;
    transform: translateY(-160px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-from-right {
  from {
    opacity: 0;
    transform: translateX(180px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}



/************** Class shadow ***************/
.shadow{
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

/************** Hide Wordpress-Logo with Wordpress-Menu in admin bar Frontend ***************/
li#wp-admin-bar-wp-logo { 
    display: none;
}