/*
=======================================================================================================================
 Styles
=======================================================================================================================
*/

* {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	}

html {
	font-size: 21px;
	line-height: 1.6;
	}

body {
	font-family: "Lato", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #333;
	background: #fff;
	padding: 0;
	margin: 0;
	}

h1 {font-size: 4.3rem; font-family: "FF Mister K Informal", serif; font-weight: 400; line-height: 0.75; padding: 0 0 25px 0; margin: -5px 0 0 0;}
h2 {font-size: 4.3rem; font-family: "FF Mister K Informal", serif; font-weight: 400; line-height: 0.75; padding: 0 0 25px 0; margin: -5px 0 0 0;}
.overline {display: block; font-size: 1.3rem; font-weight: 400; line-height: 1; color: #00663a; padding: 5px 0 5px 0; margin: 0; opacity: 0.6;}

h3 {font-size: 1.15rem; line-height: 1; padding: 15px 0 10px; margin: 0;}

p {font-size: 1rem; padding: 10px 0; margin: 0; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}

a, a:link, a:visited { text-decoration: none; color: #00663a; transition: all 0.2s ease-out 0s; }
a:hover, a:active { text-decoration: none; color: #c51a1b; transition: all 0.2s ease-out 0s; }

ul, ol {margin: 10px 0; padding: 0;}
li {margin: 10px 0; padding: 0;}

/* Elemente */

.color {color: #c51a1b;}
.-colorgradient {display:inline-block; background-image:linear-gradient(90deg,#00663a,#86bc24); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.colorgradient {color:#86bc24;}
.big {font-size: 1.1rem; }
.pad025 {padding: 0 25px; }
.center {display: block; text-align:center!important;}

.col.rel, .rel {position: relative;}
img {max-width: 100%; display: block;}
strong, .bold {font-weight: 700;}

.claim {position: absolute; display: block; left: 0; right: 0; top: 25%; margin: 0 auto; max-width: 90%; 
font-size: 6.5rem; font-family: "FF Mister K Informal", serif; font-weight: 400; line-height: 0.75; text-align: center; color: #fff; text-shadow: 0 0 20px #000;}

/* Aufzählung */

ul.box { margin: 10px 0 20px !important; padding: 0; list-style-type: none; }
ul.box li { margin: 10px 0 10px 0; padding-left: 21px; position: relative; }
ul.box li::before {border-radius: 50%; content: ""; display: block; width: 10px; height: 10px; left: 0; position: absolute; top: 12px; background-color: #c51a1b; }

/* Linkbutton */

.button-full {display:inline-block;}
.button-full a {display:inline-block; font-size: 0.9rem; font-weight: 400; padding: 12px 20px 15px; margin: 20px 10px 0px 0; background-color:#c0ddb2; color:#00663a; border-radius: 20px; }
.button-full a:hover {background-image:linear-gradient(90deg,#00663a,#86bc24); color:#fff; padding: 12px 30px 15px;}
.button-full i.icon[data-icon="circle-small"] { vertical-align: -2px; margin-right: 5px; }

/* Mehrspaltigkeit CSS */

.mehrspaltig {
	-moz-column-count:    2;
	-webkit-column-count: 2;
	column-count:         2;
	-moz-column-gap:    50px;
	-webkit-column-gap: 50px;
	column-gap:         50px;  
	padding: 10px 0 0 0;
	}

.mehrspaltig p {padding: 0; margin: 0 0 1rem 0;}

/* Map */

.map {position: relative; display: block; padding: 35px;background-color: #e5efeb; border-radius: 35px; margin: 20px 0;}
.responsive-map {position: relative; padding-bottom: 60%; padding-top: 0; height: 0; overflow: hidden; margin: 0 0 ; border-radius: 35px;}
.responsive-map iframe {position: absolute; top: 0;	left: 0; width: 100%; height: 100%;}
iframe {margin: 0; padding: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

/*
=======================================================================================================================
  PAGE STYLES
=======================================================================================================================
*/

/* Section */

section {margin: 75px 0;}
section:first-child {margin: 50px 0 -25px 0;}
section:nth-last-child(1) {margin: 50px 0 0 0;}

/* Boxen & Text */

.text-box {position: relative; display: block; padding: 55px;background-color: #e5efeb; border-radius: 35px; margin: 0;}
.text-raum {padding: 50px 100px;}

/* Banner */

#banner .table {width: 100%; display: table; padding: 00px 0 00px;}
#banner .table .cell {display: table-cell; vertical-align: middle;}
#banner .cell.right {white-space: nowrap; padding: 15px 0 0 20px; text-align:right;}
#banner .logobox img {display: block; width: 100%; max-width: 350px; height: auto; padding: 0; margin: 0;}

/* Footer */

#footer {margin-right: auto; margin-left: auto; margin-top: -175px; padding: 175px 0 50px; background-color: #e5efeb; text-align:center; }
#footer p {font-size: 0.9rem; line-height: 1.4;}
#footer a, #footer a:link, #footer a:visited { color: #86bc24; transition: all 0.2s ease-out 0s;}
#footer a:hover, #footer a:active { color: #c51a1b; transition: all 0.2s ease-out 0s;}
#footer .footerlogo img {display: block; width: 90%; max-width: 300px; height: auto; padding: 0; margin: 0 auto;}
#footer .bottom {margin-top: 10rem; }

/*
=======================================================================================================================
  Media Queries
=======================================================================================================================
*/

/* Big Desktop
====================================================================== */

@media only screen and (min-width: 1921px) {

}

/* Tablet
====================================================================== */
@media only screen and (min-width: 900px) and (max-width: 1280px) {

html {font-size: 19px; line-height: 1.6;}
	
h1 {font-size: 3.5rem; line-height: 0.8; padding: 0 0 10px 0;}
h2 {font-size: 3.5rem; line-height: 0.8; padding: 0 0 15px 0;}
.overline {font-size: 1.2rem;}
h3 {font-size: 1.15rem; line-height: 1;}

.claim {top: 20%; font-size: 5rem;}
	
section {margin: 35px 0;}
section:first-child {margin: 35px 0 0 0;}
	
#banner .logobox img {width: 90%; max-width: 275px;}
	
}

/* Phablet
====================================================================== */
@media only screen and (min-width: 600px) and (max-width: 899px) {

html {font-size: 18px; line-height: 1.6;}
	
h1 {font-size: 3.1rem; line-height: 0.8; padding: 0 0 10px 0;}
h2 {font-size: 3.1rem; line-height: 0.8; padding: 0 0 10px 0;}
.overline {font-size: 1.2rem; padding: 15px 0 0 0;}
h3 {font-size: 1.15rem; line-height: 1;}
	
.claim {top: 20%; font-size: 4.0rem;}
.mehrspaltig {-moz-column-count: 1; -webkit-column-count: 1; column-count: 1;}	
	
section {margin: 25px 0;}
section:first-child {margin: 25px 0 0 0;}
section:nth-last-child(1) {margin: 25px 0 0 0;}	
	
.text-raum {padding: 25px 50px 50px;}	
	
#banner .logobox img {width: 90%; max-width: 250px;}
#banner .cell.right {padding: 0;}

#footer .bottom {margin-top: 5rem; }

}

/* Phone
====================================================================== */
@media only screen and (max-width: 599px) {

html {font-size: 17px; line-height: 1.6;}
	
h1 {font-size: 2.75rem; line-height: 0.8; padding: 0 0 10px 0;}
h2 {font-size: 2.75rem; line-height: 0.8; padding: 0 0 10px 0;}
.overline {font-size: 1.2rem;}
h3 {font-size: 1.15rem; line-height: 1;}
	
.pad025 {padding: 0 20px; }
.claim {top: 20%; font-size: 3.4rem;}
.mehrspaltig {-moz-column-count: 1; -webkit-column-count: 1; column-count: 1;}
.map {padding: 15px; margin: 10px 0;}

section {margin: 25px 0;}
section:first-child {margin: 25px 0 0 0;}
section:nth-last-child(1) {margin: 25px 0 0 0;}	

.text-raum {padding: 25px 25px;}	
	
#banner .logobox img {width: 90%; max-width: 250px; }
#banner .cell.right {padding: 0;}
	
#footer .bottom {margin-top: 5rem; }

}