/*
Projekt       : MAG Wellnesskonzepte
Komponente    : Wordpress
Datei         : style.css
Beschreibung  : Spezielle Anpassungen des Themes "twentynineteen" für die website "mag-wellnesskonzepte.de"
Author:         Datenwege Informatik
Author URI:     http://Datenwege-Informatik.de
Template:       twentynineteen
Version:        1.0
Historie
   05.01.21  Gernot Daum  Als Kopie eine Vorlagewebsite erstellt
*/

/* Fonts */
@font-face {
  font-family: 'Tai Le';
  src: url('assets/fonts/taile.ttf') format('truetype')
}
@font-face {
  font-family: 'Tai Le Bold';
  src: url('assets/fonts/taileb.ttf') format('truetype')
}
@font-face {
  font-family: 'Myanmar MN';
  src: url('assets/fonts/mmrtext.ttf') format('truetype')
}
@font-face {
  font-family: 'Myanmar MN Bold';
  src: url('assets/fonts/mmrtextb.ttf') format('truetype')
}
@font-face {
  font-family: 'Gill Sans MT Kursiv';
  src: url('assets/fonts/GillSansMTKursiv.ttf') format('truetype')
}
/*
@font-face {
  font-family: "FontAwesome";
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/assets/fonts/fontawesome-webfont.woff2") format("woff2");
}
*/
@font-face {
  font-family: "FontAwesome";
  font-style: normal;
  src: url('assets/fonts/fa-solid-900.woff2') format('woff2'),
       url('assets/fonts/fa-solid-900.woff') format('woff'),
       url('assets/fonts/fa-solid-900.ttf') format('truetype'),
       url('assets/fonts/fa-solid-900.eot') format('embedded-opentype');
}


/* Eigene Konstanten body */
body {
	/*   Farben */
	--mag--color--primary: #042838;
	--mag--color--secondary: #b17737;
}

/* Allgemein */
body, p {
	font-family:'Tai Le',sans-serif;
	font-size: 18px;
	line-height: 22px;
	hyphens: auto
}
h1, h2, h3, h4, h5, h5 {font-family:'Myanmar MN Bold',sans-serif}

body, header, #content, .home #content, #colophon .site-info {
	max-width: 1440px;
	margin: 0 auto
}
#main {margin: 30px; padding: 0}
.home #main {margin-top: 0}
.home .entry-header {display: none}
.entry .entry-title::before, h1:not(.site-title)::before, h2::before,
.comments-area .comments-title-wrap .comments-title::before
{height:0;	margin: 0}
h1, h2, h3, h4, h5, h6 {font-weight: 400; letter-spacing: 0}
h1 {font-size: 24px; line-height: 26px}
h2 {font-size: 20px; line-height: 22px}
h3 {font-size: 18px; line-height: 20px}
p, ul {margin: 0 0 15px 10px}
ul {list-style-type: '- '; padding: 0 15px}
.NoDisplay {display: none}
.NoTop, .site-header.NoTop {margin-top: 0; padding-top: 0}
.NoBottom {margin-bottom: 0; padding-bottom: 0}
.NoTopM {margin-top: 0}
.NoBottomM {margin-bottom: 0}
.top100 {margin-top: 100px}
#primary .TopM30 {margin-top: 30px}
.entry .entry-content a, .widget a {text-decoration: none; color: var(--mag--color--primary)}
.entry .entry-content a:hover, .widget a:hover {text-decoration: underline}

 /* Kopf */
/* .site-branding {position: fixed; width: 100%} */
.site-header {padding: 30px 0 0 0}
.header-image {position: relative}
.site-branding {margin: 0}
.site-branding-left {
	float: left;
	width: 25%;
	margin: 0;
}
.site-branding-left img {
	display: block;
	width: 320px;
	margin-right: 0
}
.site-branding-right {
	float: right;
	width: 75%;
	margin: 0
}
.header-logo {
	position: absolute;
	width: 15%;
	top: 30px;
	right: 18%
}

/*    Aufbau der Seitenstruktur */
body, header {max-width: 1920px; margin: 0 auto}
.site-branding-container, #content, #colophon .site-info {max-width: 1440px; margin: 0 auto}


/* Fuß */
.pagefooter {background: #f4f4f4}
.pagefooter h2 {
	text-align: center;
	padding: 15px;
	color: #777;
	font-family: 'Gill Sans MT Kursiv',sans-serif;
  font-size: 24px;
  line-height: 26px
}
#colophon {
  background: #bdbec1;
	width: 100%
}
#colophon .site-info {
	padding: 15px;
	line-height: 14px
}
#colophon .site-info a {color: var(--mag--color--secondary)}
.copyright {float: right}
.copyright .link {margin-left: 5px}
.footer-navigation {float: left}
#colophon .site-info a:hover {color: var(--mag--color--primary)}


/*  Navigation */
.main-navigation {
	margin-top: 0;
	background: #fff;
	font-family:'Tai Le', sans-serif;
}
.main-navigation .menu {
	float: left;
	margin: 0;
	padding: 0;
	list-style: outside none none
}
.main-navigation .menu.btn {float: none}
.main-navigation .menu > li {
	position: relative;
	float: left;
  margin: 30px 12px 0 0;
  padding: 5px 10px;
  font-size: 20px;
  line-height: 20px;
  vertical-align: top;
  text-align: right
}
.main-navigation .menu > li > a {
	font-size: 20px;
	line-height: 30px;
	font-family:'Tai Le Bold', sans-serif;
	font-weight: 400;
  color: var(--mag--color--primary)
}
.main-navigation .menu > li.highlighted {background: var(--mag--color--primary)}
.main-navigation .menu > li.highlighted > a {color: #fff}
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current-page-ancestor > a,
.main-navigation .menu > li:hover > a
{color: var(--mag--color--secondary)}
.main-navigation .sub-menu {
	position: absolute;
	left: 0;
	z-index: 10;
	min-width: 240px;
	background-color: #bdbec1;
	list-style: outside none none;
	text-align: left;
	transition: all 0.5s;
}
.main-navigation .menu > li > .sub-menu {
	visibility: hidden;
	top: 20px;
	opacity: 0
}
.main-navigation .menu > li:hover > .sub-menu {
	visibility: visible;
	top: 45px;
	opacity: 100
}
/*   Mobile Menü */
.main-navigation .menu.btn:before {
	content: "\f0c9";
	font-family: FontAwesome;
	font-size: 24px;
  color: #777777;
}
.main-navigation .menu.btn.open:before {content: "\f00d"}
.main-navigation .menu.btn {
	display: none;
	width: 30px;
	height: 30px;
	margin: 1px 5px 0 5px;
	padding: 0
}

/*   Schmaler feststehender Kopf, der nach kurzem Scrollen erscheint */
.site-branding.small-header {
	position: fixed;
	width: 1440px;
	z-index: 10;
	height: 50px;
	background: #ffffff;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
}
a.logo-substitute {
	display: block;
	padding: 15px 0 10px 40px;
	background: #fff;
	color: #bdbec1;
	font-size: 25px;
	font-weight: 700;
	line-height: 25px;
	letter-spacing: 2px
}
a.logo-substitute.NoDisplay {display: none}
.small-header .main-navigation .menu > li {
  margin: 5px 12px 5px 0;
}

 /*   Bilder Kopfmenü */
.main-navigation  .pictured .sub-menu {
	width: 740px;
	padding-bottom: 15px;
	background: rgba(76, 74, 74, 0.7)
}
.main-navigation  .pictured.small .sub-menu {width: 420px}
.main-navigation .pictured .sub-menu > li > a {
	float: left;
	width: calc(50% - 22px);
	margin: 15px 0 0 15px;
	padding: 0;
	line-height: 80px;
	color: #fff;
	background: #000
}
.main-navigation .pictured.small .sub-menu > li > a {width: calc(100% - 30px)}
.main-navigation .pictured .sub-menu > li:hover > a {
	background: #4c4a4a
}
.pictured a:before {
	float: left;
	width: 40%;
	height: 80px;
	vertical-align: top
}
.pictured.small a:before {width: 25%}
.pictured li:hover > a:before {opacity: 0.8}
.pictured .massivholzsaunen a:before {
 	content: url('22_Images/menu-Massivholzsaunen.jpg');
}
.pictured .infrarotkabinen a:before {
 	content: url('22_Images/menu-Infrarotkabinen.jpg')
}
.pictured .gartensaunen a:before {
 	content: url('22_Images/menu-Gartensaunen.jpg')
}
.pictured .elementsaunen a:before {
 	content: url('22_Images/menu-Elementsaunen.jpg')
}
.pictured .sauna-und-archtitektur a:before {
 	content: url('22_Images/menu-Sauna-und-Archtitektur.jpg')
}
.pictured .aktuelle-angebote a:before {
 	content: url('22_Images/menu-Jubiläumsangebote.jpg')
}
.pictured .ausstellungstermin a:before {
 	content: url('22_Images/menu-Ausstellungstermin.jpg')
}
.pictured .telefonberatung a:before {
 	content: url('22_Images/menu-Telefonberatung.jpg')
}
.pictured .gratiskatalog a:before {
 	content: url('22_Images/menu-GratisKatalog.jpg')
}

/* Inhalte */
#content.TopMenuSpace{margin-top: 100px}
.home #content.TopMenuSpace{margin-top: 0}
.entry .entry-content {
	max-width: 100%;
	margin: 0;
	padding: 62px 0 0 0
}
.home .entry .entry-content {padding-top: 0}
.entry.subtitle .entry-content {padding: 124px 0 0 0}
.entry .entry-content > * {max-width: none}
.header-container {
  position: absolute;
  width: calc(100vw - (100vw - 100%)); /* "Trick" wegen eventueller Scrollbar */
	left: 0;
	background: #bdbec1
}
.entry .entry-header {
	max-width: 1380px;
	margin: 30px auto 15px auto
}
.entry .entry-header.tight {max-width: 1040px}
.entry .entry-title, .entry .entry-subtitle {
	margin: 15px 0;
	font-size: 30px;
	line-height: 32px;
	color: #fafafa;
	text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.8);
}
.entry .entry-title {
	font-weight: 400;
	margin-left: 15px
}
.entry .entry-subtitle {
  font-family:'Myanmar MN',sans-serif;
	margin-left: 15px
}
.Drittelseite {float: left; width: 29.33%; margin: 0 2%}
.Viertelseite {float: left; width: 22%; margin: 0 1.5%}

/*   Diverse Standards */
.clearfix:after {content: "."; clear: both; display: block; visibility: hidden; height: 0px}
.listcaption {margin-bottom: 4px}
.center {text-align: center}
.notop {margin-top: 0; padding-top: 0}
.nobottom {margin-bottom: 0; padding-bottom: 0}
.tight {max-width: 1040px; margin: 0 auto}
.narrow {max-width: 960px; margin: 0 auto}
.single-track {max-width: 800px; margin: 0 auto}
.landscapeM {margin: 0 auto; max-width: 600px}
.entry .entry-content .masonry {margin-top: 0}
.entry .entry-content .headerspacing {margin-top: 18px}
.pageheader, .entry .entry-content .pageheader, .path, .entry .entry-content .path {
	margin: 30px auto 30px auto;
	color: #777;
	line-height: 24px;
	text-align: center
}
.path, .entry .entry-content .path {max-width: 500px;}
.entry .entry-content .path.notop {margin-top: 0}
.entry .entry-content .path.nobottom {margin-bottom: 0}

/*   Überschriftstrukturen */
.dividerbefore, .dividerafter {
	width: 100px;
	height:20px;
	margin: 0 auto;
}
.dividerbefore {border-bottom: 1px solid #000}
.dividerafter {border-top: 1px solid #000}
.pageheader h2, .path h2 {
	margin: 0;
	padding: 30px 0 15px 0;
	color: #333;
	font-size: 32px;
	line-height: 36px;
	font-style: initial;
	text-transform: uppercase
}
.pageheader p, .path p {
	font-family:'Gill Sans MT Kursiv',sans-serif;
	font-size: 24px;
	line-height: 26px;
}

/*    Kopfbild Texte */
#header-image img {vertical-align: top}
#header-image {position: relative; padding-top: 15px}
#header-image .overlay-text {
	position: absolute;
	color: #fff;
	font-size: 32px;
	line-height: 34px;
	text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.8);
	left: 170px
}
#header-image .anim-text {
	position: absolute;
	top: 170px
}
#header-image .anim-text-01, #header-image .anim-text-02, #header-image .anim-text-03, #header-image .anim-text-04 {
	top: 170px;
	padding: 5px 15px;
	font-family:'Tai Le Bold', sans-serif;
	color: #fff;
	background: var(--mag--color--primary);
}
#header-image .fix-text-04 {
	display: block;
	top: 230px;
	width: 500px;
	font-family:'Tai Le Bold', sans-serif
}
#header-image .fix-text-05 {
	top: 310px;
}
#header-image .fix-text-06 {
	top: 355px;
	padding: 0 5px;
	color: var(--mag--color--primary);
	background: #fff;
	font-family:'Tai Le Bold', sans-serif;
	font-size: 20px;
	text-shadow: 2px 1px 1px rgba(0, 0, 0, 0.8);
}
#header-image .anim-text-01, #header-image .anim-text-02, #header-image .anim-text-03, #header-image .anim-text-04 {
  opacity: 0;
  animation-timing-function: linear;
  animation-fill-mode: forwards
}
#header-image .anim-text-01 {
  animation-name: anim-text-01-appear;
  animation-duration: 5s
}
@keyframes anim-text-01-appear {100% {opacity: 1}}
#header-image .anim-text-02 {
  animation-name: anim-text-02-appear;
  animation-duration: 10s
}
@keyframes anim-text-02-appear {50% {opacity: 0} 100% {opacity: 1}}
#header-image .anim-text-03 {
  animation-name: anim-text-03-appear;
  animation-duration: 15s
}
@keyframes anim-text-03-appear {66.66% {opacity: 0} 100% {opacity: 1}}

/*    Faktenkästen */
.facts {
	color: #6D6E70;
	background: #f4f4f4;
  padding-bottom: 10px;
  min-height: 612px
 }
.picturefact {color: #6D6E70}
.small .facts, .small.facts {min-height: 550px}
.large .facts, .large.facts {min-height: 700px}
.dynamic .facts, .dynamic.facts {min-height: 0px}
.facts.pictured {min-height: 666px}
.facts h3, .picturefact h3 {
	display: block;
	margin: 0 0 15px 0;
	min-height: 66px;
	padding: 5px 15px;
	font-family:'Tai Le Bold',sans-serif;
	font-size: 24px;
	line-height: 28px;
	text-align: center;
	color: #fff;
	background: #bdbec1
}
.facts.pictured, .picturefact img {
	display: block;
	margin: 0 auto;
	vertical-align: top
}
.facts p, .facts .valuepairs  {
	padding: 0 10px;
	font-family:'Gill Sans MT Kursiv',sans-serif;
	font-size: 24px;
	line-height: 28px;
	text-align: left
}
.facts.highlighted h3 {background: var(--mag--color--primary)}
.facts .small {font-size: 18px}
.fact-grid.small h3 {font-size: 20px}
.facts li {
	font-family: 'Gill Sans MT Kursiv',sans-serif;
	font-size: 24px;
	line-height: 30px;
	margin: 10px
}
.facts .telephone a {font-size: 20px}

/*   Call To Action Button */
#content .cta a {
	display: block;
	padding: 5px 10px;
	border-radius: 5px;
	color: white;
  background: var(--mag--color--primary);
	font-family:'Tai Le Bold', sans-serif;
  font-size: 20px
}
#content .path.cta a {margin-top: 15px}
#content .cta a:hover {color: black; text-decoration: none}

/*   Aktuelle Angebote */
#content .reservation .so-panel {margin-bottom: 0}
#content .reservation .cta {
  color: #6D6E70;
  background: #f4f4f4;
  text-align: center
}
#content .reservation .cta h4 {
	margin: 0; 
	padding: 1rem 0 10px 0
}
#content .reservation .cta p {
	height: 50px
}
#content .cta a, #content .reservation .cta a {
	padding: 5px 10px;
	color: white;
  background: var(--mag--color--primary);
	font-family:'Tai Le Bold', sans-serif;
  font-size: 20px
}
#content .cta a:hover, #content .reservation .cta a:hover {color: black; text-decoration: none}

/* Tabellen */
.valuepairs {margin: 0 0 15px 10px}
.valuepairs:after {content: "."; clear: both; display: block; visibility: hidden; height: 0px}
.valuepairs div {float: left; padding: 2px 12px 2px 0}
.valuepairs .name {clear: left; width: calc(22% - 12px)}
.valuepairs .value {width: calc(78% - 12px)}
.valuepairs .line {clear: left; width: calc(100% - 12px)}
.valuepairs.contact .name {max-width: 120px}
.valuepairs.privacy .name {clear: left; width: calc(40% - 12px)}
.valuepairs.privacy .value {width: calc(60% - 12px)}
.valuepairs.privacy .name {max-width: 160px}
.facts .valuepairs .name {width: calc(50% - 12px)}
.facts .valuepairs .value {width: calc(50% - 12px)}
.valuepairs.pricetable .line {width: 100%}
.valuepairs.pricetable .name {width: calc(75%); padding-left: 5px}
.valuepairs.pricetable .value {width: calc(25%); text-align: right}
.valuepairs.pricetable .sum {padding-top: 5px; font-weight: 700}
.valuepairs.pricetable .highlighted {color: var(--mag--color--primary)}

/* Kontaktformulare */
div#ui-datepicker-div { z-index:1000 !important}
.wpcf7-form input, .wpcf7-form select,
.wpcf7-form .wpcf7-textarea {
	color: #666666;
	border: 1px solid var(--mag--color--primary);
	margin: 4px 2px;
	padding: 0 10px;
	max-width: 100%
}
.txtContact, .txaContact, .btnContact {
	display: block;
	float: left;
	width: 96%;
	margin-left: 2%
}
.txaContact {margin-top: 10px}
textarea {width: 100%}
input[type="submit"] {font-size: 20px}
div.wpcf7-validation-errors, span.wpcf7-not-valid-tip {border: none; color: var(--mag--color--primary)}

.Request {margin-bottom: 20px}
.Request .lbl, .Request .txt, .Request .btn {float: left; padding: 2px 10px}
.Request .lbl {padding: 12px 0 4px 4px; font-weight: bold}
.Request .btn input {
	padding: 10px;
	text-transform: none;
  color: #fff;
	background-color: var(--mag--color--secondary);
	border: none;
}
.Request .btn input:hover {background-color: var(--mag--color--primary); color: #fff; border-color: #000}
.Request .col0 {width: 100%}
.Request .col0 input, .Request .col2 input  {width: 100%}
.Request .col1 {width: 40%}
.Request .col1.small {max-width: 240px}
.Request .col2 {width: 60%}
.Request .col0 {padding-left: 4px}
div.wpcf7-mail-sent-ok {border: 2px solid var(--mag--color--primary)}

/* Page Builder */
.home :not(.parallax) > .so-panel {padding: 0}
.logogrid {padding: 30px 5%}
.logogrid .partner {
	float: left;
	width: 25%
}
.logogrid img {
	display: block;
	width: 94%;
	max-width: 300px;
	margin: 0 auto
}
.logogrid br {display: none}

/* Google Maps */
div#googleMap {width: 80%; height: 30em; margin: 15px auto}

/* Borlab Consent Manager */
#BorlabsCookieBoxWidget {display: none}


/* Responsive */
.main-navigation.menu.open {display: block; margin: 5px 0 0 15px}

/* Maximalbreite  */
@media screen and (max-width: 1440px) {
	.main-navigation .menu > li {margin-right: 5px}
	.main-navigation .menu > li > a {font-size: 18px}
	.small-header .site-branding-right .menu > li > a {font-size: 17px}
	.logogrid .partner {width: 33.33%}
  .buttongroup .Viertelseite {
		width: 47%;
		max-width: 400px;
		margin: 15px 60px 15px 0;
	}
}

/* Kleiner PC Bildschirm  */
@media screen and (max-width: 1168px) {
	.main-navigation .menu > li {margin-right: 12px}
	.main-navigation .menu > li > a {font-size: 20px}
  .small-header .site-branding-left {width: 20%}
	.site-branding-right {width: 100%}
	.small-header .main-navigation .menu > li {margin: 5px 2px 5px 0}
	.small-header .site-branding-right {width: 80%}
	.small-header .site-branding-right .menu > li > a {font-size: 16px}
	#header-image .overlay-text {left: 120px}
	.buttongroup .tile01 h2 {
		margin: 16px 0 0 0;
		padding: 0 15px;
		font-size: 15px
	}
}

/* Tablett Landscape */
@media screen and (max-width: 960px) {
	.site-branding-left {width: 100%}
  .small-header .site-branding-left {width: 0; display: none}
	.small-header .site-branding-right {width: 100%; padding-left: 15px}
	.small-header .site-branding-right .menu > li > a {font-size: 18px}
	.main-navigation .menu > li {margin-right: 0}
	.main-navigation .menu > li > a {font-size: 18px}
	#header-image .overlay-text {left: 70px}
  #header-image .fix-text-06 {max-width: 500px}
	.panel-grid, .fact-grid {flex-direction: column}
	#main .tabletwrap {flex-wrap: wrap}
	#main .tabletwrap .panel-grid-cell,
	#main .panel-grid .fact-grid .panel-grid-cell {
		width: 100%;
		max-width: 600px;
		margin: 15px auto
	}
	.facts, .small .facts, .small.facts, .large .facts, .large.facts {min-height: 0}
	.buttongroup .Drittelseite, .buttongroup .Viertelseite {
		width: 100%;
		max-width: 400px;
		margin: 15px auto 15px auto
	}
	.buttongroup .tile01 h2 {
		margin: 30px 0 0 0;
		padding: 0 30px;
		font-size: 18px
	}
}

/* Tablett Portrait / großer Umbruch */
@media screen and (max-width: 768px) {
/*   Hamburger Menü */
	.main-navigation .menu.btn {display: block}
	.main-navigation .menu {
		display: none;
		width: 100%;
		max-width: 480px
	}
	.main-navigation .menu.open {display: block}
	.main-navigation .menu.open .sub-menu {
    visibility: visible;
    position: relative;
  	display: block;
  	width: 100%;
    top: 0;
    opacity: 1;
  }
  .main-navigation .menu > li:hover > .sub-menu {top: 0}
  .main-navigation .menu.open > li {
  	float: none;
  	margin: 15px 0 0 0;
  	padding: 0;
  	text-align: left
  }
	.main-navigation .menu.open  > li > a {
    padding-left: 15px;
    border-left: none
  }
  .main-navigation .pictured .sub-menu > li {padding: 0 0 15px 0}
  .main-navigation .pictured .sub-menu > li:first-child {padding-top: 15px}
  .main-navigation .pictured .sub-menu > li > a,
  .main-navigation .pictured.small .sub-menu > li > a {
	  float: none;
	  width: 90%;
	  margin: 0 5%
  }

  .header-logo {right: 4%}
  .logo-grafic {display: block}
  .logo-grafic img {display: block; margin:0 auto}
  /*   Kopfbild Texte */
  #header-image .overlay-text {left: 30px; max-width: 500px; font-size: 25px}
  #header-image .anim-text   {top: 100px}
  #header-image .fix-text-04 {top: 160px}
  #header-image .fix-text-05 {top: 240px}
  #header-image .fix-text-06 {top: 280px; font-size: 20px}
	.logogrid .partner {width: 50%}
}

/* Smartphone groß */
@media screen and (max-width: 600px) {
  #header-image .overlay-text {
  	left: 20px;
  	max-width: 460px;
  	font-size: 22px;
  	line-height: 26px
  }
  #header-image .anim-text {top: 60px}
  #header-image .fix-text-04 {top: 110px}
  #header-image .fix-text-05 {top: 190px}
  #header-image .fix-text-06 {max-width: 420px; top: 230px; font-size: 18px}
  .entry .entry-title {font-size: 24px}
  .valuepairs.pricetable .name, .valuepairs.pricetable .value {width: 100%}
  .Request .col1 {width: 100%}
  .Request .col2 {width: 100%}
  .copyright,.footer-navigation {float: none; margin: 15px 0}
}

/*  Smartphone */
@media screen and (max-width: 480px) {
	.header-logo {display: none}
  #header-image .overlay-text {left: 15px; max-width: 360px; font-size: 19px}
  #header-image .anim-text {top: 40px}
  #header-image .anim-text-01, #header-image .anim-text-02, #header-image .anim-text-03
  {padding: 2px 5px}
  #header-image .fix-text-04 {top: 80px}
  #header-image .fix-text-05 {top: 140px}
  #header-image .fix-text-06 {top: 180px; font-size: 17px}
	.logogrid .partner {width: 100%}
	.footer-navigation .footer-menu li {margin-right: 5px}
}

/*  Smartphone klein  */
@media screen and (max-width: 400px) {
	#header-image .overlay-text {max-width: 285px; font-size: 15px; line-height: 20px}
	#header-image .anim-text {top: 20px}
  #header-image .fix-text-04 {top: 50px}
  #header-image .fix-text-05 {top: 100px}
  #header-image .fix-text-06 {top: 130px; font-size: 13px; text-shadow: none}
  .entry .entry-title {font-size: 20px}
	.buttongroup .tile01 h2 {
		margin: 16px 0 0 0;
		padding: 0 15px;
		font-size: 15px
	}
  .valuepairs .name, .valuepairs .value {width: calc(100% - 12px)}
	.footer-navigation .footer-menu li {font-size: 12px}
}

/*  Zwischengröße  */
@media screen and (max-width: 360px) {
	#header-image .overlay-text {font-size: 14px}
}

/*  Smartphone sehr klein  */
@media screen and (max-width: 320px) {
	#header-image .overlay-text {max-width: 268px; font-size: 14px; line-height: 18px}
  #header-image .fix-text-04 {top: 40px}
  #header-image .fix-text-05 {top: 80px}
  #header-image .fix-text-06 {top: 110px}
	.buttongroup .tile01 h2 {font-size: 13px}
}


/* Masonry */
.entry .entry-content .Vollseite {float: left}
.entry .entry-content .perc6 {float: left; width: 60%}
.entry .entry-content .half {float: left; width: 50%}
/*
.entry .entry-content .masonry-1-1 {
	width: calc(61.8% - 16px);
	margin: 0 16px 0 0
}
.entry .entry-content .masonry-1-2 {
	width: calc(38.2% - 16px);
  margin: 0 0 0 16px
}
.entry .entry-content .masonry-2-1, .entry .entry-content .masonry-2-2 {width: calc(50% - 16px)}
.entry .entry-content .masonry-2-1 {margin: 30px 16px 0 0}
.entry .entry-content .masonry-2-2 {margin: 30px 0 0 16px}
.entry .entry-content .masonry-3-1 {
	width: calc(40% - 16px);
	margin: 30px 16px 0 0
}
.entry .entry-content .masonry-3-2 {
	width: calc(30% - 16px);
	margin: 30px 8px 0 16px
}
.entry .entry-content .masonry-3-3 {
	width: calc(30% - 16px);
	margin: 30px 0 0 8px
}
.entry .entry-content .masonry-3-4 {
	width: calc(30% - 16px);
	margin: 16px 8px 0 16px
}
.entry .entry-content .masonry-3-5 {
	width: calc(30% - 16px);
	margin: 16px 0 0 8px
}
*/
.entry .entry-content .masonry-V {width: calc(100%);	margin: 0 auto}
.entry .entry-content .masonry-GB-1 {
	width: calc(61.8% - 15px);
	margin: 0 15px 0 0
}
.entry .entry-content .masonry-GS-2 {
	width: calc(38.2% - 15px);
  margin: 0 0 0 15px
}
.entry .entry-content .masonry-GS-1 {
	width: calc(38.2% - 15px);
	margin: 0 15px 0 0
}
.entry .entry-content .masonry-GB-2 {
	width: calc(61.8% - 15px);
  margin: 0 0 0 15px
}
.entry .entry-content .masonry-H-1 {
	width: calc(50% - 15px);
  margin: 0 15px 0 0
}
.entry .entry-content .masonry-H-2 {
	width: calc(50% - 15px);
  margin: 0 0 0 15px
}
.entry .entry-content .masonry-H4-1 {
	width: calc(50% - 8px);
  margin: 0 8px 15px 0
}
.entry .entry-content .masonry-H4-2 {
	width: calc(50% - 7px);
  margin: 0 0 15px 7px
}
.entry .entry-content .masonry-H4-3 {
	width: calc(50% - 8px);
  margin: 15px 8px 0 0
}
.entry .entry-content .masonry-H4-4 {
	width: calc(50% - 7px);
  margin: 15px 0 0 7px
}
.entry .entry-content .masonry-D-1 {
	clear: left;
	width: calc(33.33% - 20px);
  margin: 0 15px 0 0
}
.entry .entry-content .masonry-D-2 {
	width: calc(33.33% - 20px);
  margin: 0 15px 0 15px
}
.masonry-D-2 .tilet1 {margin-top: 30%}
.entry .entry-content .masonry-D-3 {
	width: calc(33.33% - 20px);
  margin: 0 0 0 15px
}
.entry .entry-content .masonry-P3m4-1 {
	width: calc(50% - 15px);
  margin: 0 15px 15px 0
}
.masonry-P3m4-1 .tilet1 {margin-top: 8%}
.entry .entry-content .masonry-P3m4-2 {
	width: calc(50% - 15px);
  margin: 0 0 15px 15px
}
.entry .entry-content .masonry-P3m4-3 {
	width: calc(50% - 15px);
  margin: 15px 15px 0 0
}
.entry .entry-content .masonry-P3m4-4 {
	width: calc(50% - 15px);
  margin: 15px 0 0 15px
}
.entry .entry-content .masonry-P4-1 {
	width: calc(40% - 30px);
  margin: 0 30px 0 0
}
.entry .entry-content .masonry-P4-2 {
	width: calc(40% - 30px);
  margin: 0 0 0 30px
}

/*   Kacheln */
.tile01 {
  float: left;
  width: 100%;
  margin: 0;
  text-align: center;
  hyphens: none;
	background: var(--mag--color--secondary)
}
.tile01 h2, .tile01 img{display: block; float: left}
.tile01 h2 {
	float: right;
	width: 61.8%;
	padding: 0 30px;
	font-size: 18px;
	line-height: 22px;
	color: #fff;
}
.tile01 img {
	float: left;
	width: 38.2%;
	max-width: 140px;
  margin: 0 auto;
}
.tile01:hover {opacity: 0.6}
.buttongroup {
	margin: 60px 0 30px 0;
	padding: 30px 0;
}
.buttongroup.NoTopM {margin-top: 0}
.buttongroup .Drittelseite, .buttongroup .Viertelseite {border: 2px solid #000}
.buttongroup h2 {margin-top: 45px}
.buttongroup .Viertelseite h2 {margin-top: 15px; padding: 0 15px; font-size: 16px}
.buttongroup img {background: #fff}

/*   Kacheln animiert */
.tilea1 {
	float: left;
	margin: 0;
	width: 100%;
  text-align: center;
  hyphens: none
}
.tilea1 img {vertical-align: top}
.tilea1 .frame {
	position: relative;
	overflow: hidden;
	width: 100%
}
.tilea1 .anim {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  transition: top 0.3s;
}
.tilea1 .anim h2 {
	text-transform: uppercase;
	font-size: 36px;
	line-height: 40px;
	margin-top: 220px;
  margin-bottom: 30px;
	color: rgba(255, 255, 255, 1.0);
	background: rgba(189, 190, 193, 0.35);
	text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.8);
	opacity: 0;
	transition: all 1s
}
.perc6 .tilea1 .anim h2, .half .tilea1 .anim h2, .font-s .tilea1 .anim h2
{font-size: 30px}
.perc6 .tilea1 .anim h2 {margin-top: 100px}
.half .tilea1 .anim h2 {margin-top: 120px}
.brick5 .tilea1 .anim h2 {margin-top: 80px}
.brick5 p {margin-bottom: 0}
.brick5 img {max-height: 100%}
.tilea1 .anim h3 {
	display: inline;
	margin-top: 20%;
	padding: 10px 15px 0 15px;
	font-size: 24px;
	font-weight: 100;
	color: rgba(255, 255, 255, 1.0);
  background: var(--mag--color--primary);
	text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.8);
	line-height: 28px;
	opacity: 0;
	transition: all 1s
}
.perc6 .tilea1 .anim h3, .half .tilea1 .anim h3, .font-s .tilea1 .anim h3
{font-size: 21px; line-height: 40px}
.tilea1:hover .anim {background: rgba(189, 190, 193, 0.35)}
.tilea1:hover .anim h2 {opacity: 1; background: transparent}
.tilea1:hover .anim h3 {opacity: 1}

/* Icons */
.valuepairs a:before {float: left}
#masthead .telephone a, #masthead .instagram a, #masthead .whatsapp a{
	position: relative;
}
.telephone a, .instagram a, .whatsapp a {
	position: relative;
  margin-left: 20px
}
#masthead .instagram a, #masthead .whatsapp a {color: white}
.telephone a:before, .instagram a:before, .whatsapp a:before {
	position: absolute;
	top: -4px;
	content: '';
	width: 25px;
	height: 25px;
	margin-top: 3px;
	background-size: 25px 25px;
}
.telephone a:before {
	left: -30px;
	background: url('21_Icons/telephone.png');
	background-size: 25px 25px
}
.instagram a:before {
	background: url('21_Icons/instagram.png');
	background-size: 25px 25px
}
.whatsapp a:before {
	background: url('21_Icons/whatsapp.png');
	background-size: 25px 25px
}

.email a:before {
	padding: 2px 10px 0 0;
	content: url('21_Icons/email.png')
}
/*   Texteinschübe */
.entry .entry-content .tilet1 h3 {
	margin: 0;
	padding-top: 12px;
	text-align: center;
	font-size: 24px;
	line-height: 48px
}
.entry .entry-content .tilet1 p {
  text-align: center;
  color: #777;
}
.tilet1 .dividerbefore {height: 0}

/*   Masonry Responsive */

/* Maximalbreite  */
@media screen and (max-width: 1440px) {
	.tilea1 .anim h2 {margin-top: 160px}
	.masonry-P3m4-1 .tilet1 {margin-top: 0}
	.brick5 .dividerbefore, .brick5 .dividerafter {height:10px}
  .brick5 .tilea1 .anim h2 {margin-top: 60px; font-size: 26px; line-height: 30px}
	.perc6 .tilea1 .anim h2 {margin-top: 30px; margin-bottom: 30px}
}

/* Kleiner PC Bildschirm  */
@media screen and (max-width: 1168px) {
	.tilea1 .anim h2 {margin-top: 120px; font-size: 26px; line-height: 30px}
	.masonry-V .tilea1 .anim h2 {margin-top: 120px; font-size: 28px; line-height: 30px}
	.masonry-D-1 .tilea1 .anim h2, .masonry-D-2 .tilea1 .anim h2, .masonry-D-3 .tilea1 .anim h2
	{margin-top: 80px; font-size: 22px; line-height: 24px}
	.masonry-D-1 .tilea1 .anim h3, .masonry-D-2 .tilea1 .anim h3, .masonry-D-3 .tilea1 .anim h3
	{font-size: 20px; line-height: 22px}
	.brick5 .tilea1 .anim h2, .half .tilea1 .anim h2
	{margin-top: 40px; font-size: 22px; line-height: 26px}
	.perc6 .tilea1 .anim h2 {font-size: 24px; line-height: 26x}
	.perc6 .tilea1 .anim h3, .half .tilea1 .anim h3, .font-s .tilea1 .anim h3
  {font-size: 18px}
}

/* Tablett Landscape */
@media screen and (max-width: 960px) {
	.tilea1 .anim h2 {margin-top: 80px}
	.masonry-V .tilea1 .anim h2 {margin-top: 100px; font-size: 24px; line-height: 26px}
	.masonry-D-1 .tilea1 .anim h2, .masonry-D-2 .tilea1 .anim h2, .masonry-D-3 .tilea1 .anim h2
	{margin-top: 80px; font-size: 20px; line-height: 22px}
	.masonry-D-1 .tilea1 .anim h3, .masonry-D-2 .tilea1 .anim h3, .masonry-D-3 .tilea1 .anim h3
	{font-size: 18px; line-height: 20px}
	.brick5 .tilea1 .anim h2, .half .tilea1 .anim h2 {
		margin-top: 15px;
		font-size: 16px;
		line-height: 22px
	}
  .perc6 .tilea1 .anim h2 {margin-top: 15px; margin-bottom: 15px; font-size: 20px; line-height: 22x}
	.perc6 .tilea1 .anim h3, .half .tilea1 .anim h3, .font-s .tilea1 .anim h3
  {font-size: 15px}
	.brick5 .dividerbefore, .brick5 .dividerafter {display: none}
	.entry .entry-content .brick5 .tilet1 h3 {padding-top: 0; line-height: 26px}
}

/* Tablett Portrait / großer Umbruch */
@media screen and (max-width: 768px) {
	.entry .entry-content	.masonry .Vollseite {
		float: none;
		width: 100%;
		max-width: 480px;
		margin: 0 auto 15px auto
	}
  .entry .entry-content .half, .entry .entry-content .perc6 {width: 100%}
	.entry .entry-content	.masonry .Vollseite:after {content: "."; clear: both; display: block; visibility: hidden; height: 0px}
	.tilea1 .anim {top: 0}
	.tilea1 .anim h2,	.perc6 .tilea1 .anim h2,.half .tilea1 .anim h2,	.brick5 .tilea1 .anim h2 {
		margin-bottom: 30px;
		background: transparent;
	}
	.tilea1 .anim h2 {
		margin-top: 100px;
		font-size: 36px;
		line-height: 40px
	}
	.perc6 .tilea1 .anim h2,
	.half .tilea1 .anim h2,
	.brick5 .tilea1 .anim h2 {
		margin-top: 60px;
		font-size: 30px;
		line-height: 34px
	}
	.perc6 .tilea1 .anim h3, .half .tilea1 .anim h3, .font-s .tilea1 .anim h3
  {font-size: 21px}
	.masonry-V .tilea1 .anim h2
	{margin-top: 40px; font-size: 20px; line-height: 22px}
  .masonry-D-1 .tilea1 .anim h2, .masonry-D-2 .tilea1 .anim h2, .masonry-D-3 .tilea1 .anim h2 {
    margin-top: 100px;
    font-size: 36px;
    line-height: 40px;
  }
  .masonry-V .tilea1 .anim h3
	{font-size: 18px; line-height: 20px}
  .masonry-D-1 .tilea1 .anim h3, .masonry-D-2 .tilea1 .anim h3, .masonry-D-3 .tilea1 .anim h3
  {font-size: 24px; line-height: 28px}
  .masonry-D-2 .tilet1 {margin-top: 0}
}

/* Smartphone groß */
@media screen and (max-width: 600px) {
	.masonry-V .tilea1 .anim h2
	{margin-top: 25px; font-size: 20px; line-height: 22px}
	.tilea1 .anim h2 {
		margin-top: 80px;
		font-size: 32px;
		line-height: 36px
	}
	.brick5 .tilea1 .anim h2 {
		margin-top: 40px;
		font-size: 28px;
		line-height: 32px
	}
}

/*  Smartphone */
@media screen and (max-width: 480px) {
	.tilea1 .anim h2 {
		margin-top: 60px;
		font-size: 28px;
		line-height: 32px
	}
	.masonry-GB-1 .tilea1 .anim h2,	.masonry-GB-2 .tilea1 .anim h2 {margin-top: 50px}
}

/*  Smartphone klein  */
@media screen and (max-width: 400px) {
	.tilea1 .anim h2, .half .tilea1 .anim h2, .perc6 .tilea1 .anim h2, .brick5 .tilea1 .anim h2 {
		margin-top: 15px;
		margin-bottom: 15px; 
		font-size: 22px;
		line-height: 24x
	}
	.tilea1 .anim h3 {font-size: 20px; line-height: 22px}
	.tilea1 .anim h3, .half .tilea1 .anim h3, .perc6 .tilea1 .anim h3, .brick5 .tilea1 .anim h3 
	{margin-top: 0}
	.masonry-GB-1 .tilea1 .anim h2,	.masonry-GB-2 .tilea1 .anim h2 {margin-top: 15px}
	.masonry-D-1 .tilea1 .anim h2, .masonry-D-2 .tilea1 .anim h2, .masonry-D-3 .tilea1 .anim h2
  {margin-top: 60px; font-size: 22px; line-height: 24px}
  .masonry-D-1 .tilea1 .anim h3, .masonry-D-2 .tilea1 .anim h3, .masonry-D-3 .tilea1 .anim h3
  {font-size: 20px; line-height: 22px}
}

/*  Smartphone sehr klein  */
@media screen and (max-width: 320px) {
	.tilea1 .anim h2, .half .tilea1 .anim h2, .perc6 .tilea1 .anim h2, .brick5 .tilea1 .anim h2 {
		font-size: 20px;
		line-height: 22x
	}
	.tilea1 .anim h3 {padding: 5px 5px 0 10px}
}