/* pt-sans-regular - latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('PT Sans'), local('PTSans-Regular'),
       url('../fonts/pt-sans-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans-v12-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* kreon-regular - latin */
@font-face {
  font-family: 'Kreon';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/kreon-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/kreon-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/kreon-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/kreon-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/kreon-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/kreon-v23-latin-regular.svg#Kreon') format('svg'); /* Legacy iOS */
}

/* kreon-700 - latin */
@font-face {
  font-family: 'Kreon';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/kreon-v23-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/kreon-v23-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/kreon-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/kreon-v23-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/kreon-v23-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/kreon-v23-latin-700.svg#Kreon') format('svg'); /* Legacy iOS */
}






/* ALLGEMEIN */

html {
	font-family: 'PT Sans';
	font-weight: normal;
	font-size: 18px;
	line-height: 1.5;
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

.header .inside, #content, .kacheln, .footer .inside {
	max-width: 950px;
	margin: 0 auto;
	padding: 0 2em;
}

p {margin: 0.5em 0;}
a {color: black; text-decoration: none; transition: 0.3s;}
a:hover {color: #258b70;}

ul {padding-left: 1em;}

h1, h2, h3 {font-family: 'Kreon'; font-weight: 400;}
h1, h2 {font-size: 1.5em; margin: 0;}
h3 {margin-bottom: 0.5em;}


/**** HEADER ****/

.header {}

.header-inner {
	margin: 0.7em 0;
	display: grid;
	grid-template-columns: 1fr 13em;
	/*align-items: baseline;*/
}

.header a.logo {
  font-family: 'Kreon';
  font-weight: 700;
  font-size: 2em;
  color: #258b70;
}
.header .rechts {text-align: right;}



/**** INHALT ****/

.body .container {
  min-height: calc(100vh - 14em);
  padding-top: 4em;
  padding-bottom: 2em;
  background-color: #80AA20;
  background: url("../images/hg_gregovish-291024_pixabay.jpg") no-repeat;
  background-size: cover;
}

/* Zurück-Pfeil */
.back {
  text-shadow: 0px 0px 3px black;
  font-size: 2.5em;
  font-family: 'Kreon';
  font-weight: 700;
  position: absolute;
  margin-top: -60px;
}
.back a {color: white; padding: 0 6px 0 12px;}
.back a:hover {padding: 0 12px 0 6px;}
body.itemid-101 .back {display: none;}


/* Inhalts-Kasten */
.blog-featured {
  padding: 1em 1.3em;
  color: white;
  background: rgba(37,139,112,0.9);
}
/*.blog-featured:not(.index) h1 {margin-bottom: 12px; border-bottom: 1px solid;}*/
.blog-featured a {color: white;}
.blog-featured a:before {content: '→ ';}
.blog-featured a:hover {margin-left: 10px;}

.blog-featured a[href^="tel:"]:before {content: '';}


/* Kacheln (Startseite) */
.kacheln {display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 0 1em; margin-top: 1em;}

.kachel {
	width: calc(33.3% - 2.7em);
	margin-bottom: 1em;
	padding: 4em 1em 1em;
	background: rgba(255, 255, 255, 0.9);
	transition: 0.5s;
}
.kachel:hover {background: rgba(255, 255, 255, 1);}
.kachel p {margin: 0;}


/* Langtext (Startseite) */
.footer .custom {
  display: block;
  margin: 3em 0;
}
.footer .custom li {margin-bottom: 0.4em;}

#mod-custom111, #mod-custom113 {
	columns: 2;
	column-gap: 3em;
}
#mod-custom111 p:first-of-type,
#mod-custom113 p:first-of-type {margin-top: 0;}
#mod-custom111 p:last-of-type,
#mod-custom113 p:last-of-type {margin-bottom: 0;}

h2, h3 {column-span: all;}
#mod-custom111 h3 {margin-bottom: 0;}
#mod-custom111 h2 {margin-bottom: 1rem;}

#mod-custom112 {
	position: relative;
	padding: 1.5em 0;
	overflow: visible;
	color: white;
}
#mod-custom112::before {
    content: "";
    height: 100%;
    width: 100vw;
    position: absolute;
    top: 0;
    left: calc(26.4em - 50vw);
    background: url("../images/hg_gregovish-291024_pixabay-dark.jpg") no-repeat;
    background-size: cover;
    z-index: -1;
}

/* Unterseiten */
.item-page {
	padding: 1em 1.3em;
	background: white;
}



/**** FOOTER ****/
.footer .container {margin-bottom: 4em;}

.footer .mod-menu {font-size: 0.8em; text-align: right;}
.footer .mod-menu li {display: inline-block; padding-left: 1em;}
.footer a {color: #258b70;}
.footer a:hover {color: black;}




/*********** RESPONSIV ***********/
/*********** RESPONSIV ***********/
/*********** RESPONSIV ***********/
/*********** RESPONSIV ***********/




/*********** DESKTOP ***********/
@media (max-width:1300px) {

html {font-size: 16px;}
.header .inside, #content, .kacheln, .footer .inside {max-width: 850px;}

} /* Ende Desktop */



/*********** TABLET 1 ***********/
@media (max-width:900px) {

html {font-size: 15px;}
.header a.logo {font-size: 1.9em;}
.kachel h2 {font-size: 1.2em;} 

#mod-custom111, #mod-custom113 {columns: 1;}
#mod-custom112::before {left: -2em;}


} /* Ende Tablet */



/*********** TABLET 1 ***********/
@media (max-width:700px) {

.header-inner {display: block;}
.header .rechts {text-align: left;}
.header .rechts div {display: inline-block;}
.header .rechts .tel:before {content: ' | ';}

} /* Ende Tablet */



/*********** MOBIL 1 ***********/
@media (max-width:500px) {

html {font-size: 14px;}
.header .inside, #content, .kacheln, .footer .inside {padding: 0 1.5em;}
.header a.logo {font-size: 5.9vw;}
.kachel {width: calc(50% - 2.5em);}

} /* Ende Mobil 1 */



/*********** MOBIL 2 ***********/
@media (max-width:400px) {

.header .inside, #content, .kacheln, .footer .inside {padding: 0 1em;}
.header-inner {margin-top: 0.5em;}


} /* Ende Mobil 2 */



/*********** MOBIL 3 ***********/
@media (max-width:340px) {
	
.header .rechts {font-size: 4vw;}


} /* Ende Mobil 3 */