@charset "utf-8";
/* CSS Document

jutta gradel
------------------------------------------------

colors
------------------------------------------------*/
:root {
	--color-1: #e5eecc; /* lichtes hellgrün - Hintergrund #e5eecc*/
	--color-2: #fff; /* weiß */
	--color-3: #5A701F ; /* hellgrün 98bc34*/
	--color-3t: rgba(152, 188, 52, 0.4); /* hellgrün transparent*/
	--color-3t2: rgba(152, 188, 52, 0.2); /* hellgrün transparent 2*/
	--color-3-l2: #0785DA; /* blau 2 Stufen heller */
	--color-4: #aacde5; /* hellblau / Uranian Blue */ 
	--color-5: #f7fafc; /* hellgraublau */
	--color-6: #000; /* dunkelgrau 383838*/
}

/* fonts
--------------------------------------------------- */
@font-face {font-family: 'courier_primeregular'; src: url('courier_prime-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'courier_primebold'; src: url('courier_prime_bold-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'courier_primeitalic'; src: url('courier_prime_italic-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'courier_primebold_italic'; src: url('courier_prime_bold_italic-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'opensans-regular'; src: url('opensans-regular-webfont.woff2') format('woff2'), url('opensans-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'opensans-bold'; src: url('opensans-bold-webfont.woff2') format('woff2'), url('opensans-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'opensans-italic'; src: url('opensans-italic-webfont.woff2') format('woff2'), url('opensans-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}

body{font-family:'opensans-regular';}
strong{font-family:'opensans-bold';}
.vertical-menu a {font-family:'courier_primebold';}
h1, h2{font-family:'courier_primeregular';}

/* font-size
--------------------------------------------------- */
body {font-size: 1.2rem; line-height: 160%;}
h1{font-size:1.5em;}
h2{font-size:1.3em;}
.h1big{font-size: 36px;}
.text30{font-size: 30px;}
.text24{font-size: 24px; line-height: 200%;}
.vertical-menu a{font-size:  21px;}

@media screen and (max-width: 500px) {
	body {font-size: 1.2rem;}
	h1{font-size: 24px;}
	h2{font-size: 21px;}
	.h1big{font-size: 28px;}
}

/* width
--------------------------------------------------- */
.centerwidth1{
	margin: 0 auto;
	max-width: 820px;
}
.centerwidth2{
	margin: 0 40px;
	max-width: 1200px;
	padding: 0 50px;
}
.centerfull{
	width: 100%;
	padding: 15px 0;
	margin:15px 0;
}

/* basics
------------------------------------------------------------------------- */
 *{ margin:0; padding:0;  box-sizing: border-box; }
/* scroll-behavior */ html {scroll-behavior: smooth;} 
/* Firefox-Bug */ a {outline:none;} a img {border:none;}
/* img responsive */  img {max-width: 100%; height: auto;}

body { background-color: var(--color-1); color: var(--color-6);}
td{padding: 7px;}
.marginbottom1{margin-bottom: 15px;}

/* Skip-Link
--------------- */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
  background: #fff;
  color: #000;
  z-index: 9999;
  padding: 8px;
  outline: 2px solid #000;
}

:focus-visible {
  outline: 5px solid #fff;
  outline-offset: 3px;
}

/* navigation
------------------------------------------------------------------------- */

.link1{color: var(--color-6); }
.link1:hover{color: var(--color-3); }

footer a{color:#fff}

.vertical-menu {
   /* width: 200px; Set a width if you like */
}

.vertical-menu a {
  background-color: var(--color-3t);
  color: var(--color-6); 
  display: block; /* Make the links appear below each other */
  padding: 12px 0 12px 30px;
  text-decoration: none; /* Remove underline from links */
  
	-webkit-transition: background-color 0.6s linear;
    -ms-transition: background-color 0.6s linear;
    transition: background-color 0.6s linear;
	

}

.vertical-menu a:hover {
  background-color: var(--color-3t2);
}

.vertical-menu a.active {
  background-color: var(--color-3); /* Add a green color to the "active/current" link */
  color: white;
}
/* headings
------------------------------------------------------------------------- */
h1{color: var(--color-6); margin-bottom: 10px;}
h2{ color: var(--color-6);}

/* list
------------------------------------------------------------------------- */
.ulli1 li{margin-bottom: 15px;}

/* hr
------------------------------------------------------------------------- */
.hr1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

/* buttons
------------------------------------------------------------------------- */
.button-1 {
	background-color:var(--color-3);
	border-radius:10px;
	display:inline-block;
	cursor:pointer;
	color:var(--color-2);
	font-size:22px;
	font-weight:bold;
	padding:12px 40px;
	margin: 20px 0 0 0;
	text-decoration:none;
	border: solid 3px var(--color-2);
	letter-spacing: 0.15em;
}
.button-2{
	background-color:var(--color-3-l2);
}
.button-1:hover {
	background-color:var(--color-1-l2);
	color:var(--color-2);
}
.button-1:active {
	position:relative;
	top:1px;
}
.m-bottom{
	margin-bottom: 30px;
}


/* sections
------------------------------------------------------------------------- */

header { position: relative; height: 400px; overflow: hidden; z-index: 5;}

.header__bg { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; text-align: center;
 background-size: 100% auto; background-size: cover; background-repeat: no-repeat; transform: skewY(-5deg); transform-origin: top left;
}
#headerimg{ border-bottom: solid 20px #98bc34;}

#columnleft{ position: fixed; top: 100px; left: 9%; border-bottom: solid 20px #98bc34; z-index: 10;}

#bleft { width: 40%; min-width: 650px; height: 200px; float: left;}
#bmain{ width: 45%; float: left;  margin-right: 30px;}

footer{
	clear: both;
	background-color: var(--color-3);
	padding: 50px;
	color: var(--color-2);
}

#mobilemenubutton{position: absolute; top:100px; right:50px; z-index: 80; background-color: rgb(255, 255, 255, 0.7); border-radius: 5px;}
#mobilemenubuttonstyle{font-size:30px; cursor:pointer; margin: 20px 30px; float: right;}
#logo2, #mobilemenubutton, #mobilheaderimg{ display: none;}

@media screen and (max-width: 1400px) {
	#columnleft{left: 4%;}
	#bleft {min-width: 550px;}
}
@media screen and (max-width: 1200px) {
	.vertical-menu, #bleft{display:none;}
	#columnleft{position: absolute; border-bottom: solid 0px #98bc34; left: 15%;}
	#bmain{ width: 70%; float: none;  margin: 30px auto;}
	#mobilemenubutton{ display: block; position: absolute; top:30px; right:50px; z-index: 80;}
}

@media screen and (max-width: 890px) {
	header{ height: auto; width: 100%; text-align: center;}
	#columnleft, .header__bg{display: none;}
	#mobilheaderimg{ display: block; line-height: 0;}
	#mobillogo{display: inline-block; margin: 0 auto; z-index: 200; background-color: #f7faf0; line-height: 0;}
	#mobillogobanner{width: 100%; border-bottom: solid 11px #98bc34; background-color:#f7faf0; line-height: 0;}
	#bmain{ width: 70%; float: none;  margin: 30px auto;}
}
@media screen and (max-width: 510px) {
	#mobilemenubutton{position: absolute; top:10px; right:10px; z-index: 80;}
	#mobilemenubuttonstyle{font-size:30px; cursor:pointer; margin: 10px 15px; float: right;}
}


/* sections
------------------------------------------------------------------------- */
.centertext{
	text-align: center;
}
.bg1{
	background-color:var(--color-5);
}
.round {
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
.lineheight0{
	line-height: 0px;
}
.text30{
	font-size: 30px;
}
.text24{
	font-size: 24px; line-height: 200%;
}
.textleft{
	text-align: left;
}
.spacer80{
	margin-bottom: 80px;
}
.margin1{
	margin: 40px 0;
}
.divider-h-1{
	height: 40px;
}
/* boxes
------------------------------------------------------------------------- */
.box-1{
	background-color: #f5f5f5;
	background-color: var(--color-1);
	text-align: center;
	border-radius: 5px;
	padding: 25px;
	float: left;
	width: 340px;
}
.box-1 h2{color: var(--color-2);}
.box-2{
	background-color: var(--color-3);
}
.box-2 h2{color: var(--color-2);}
.divider-ver-1{
	float: left;
	width: 25px;
}
        
.clear{
	clear: both;
}
.box3{
	margin-top: 10px; border-radius: 10px; padding: 20px 30px 20px 100px; border: solid 1px var(--color-1);
}

/* mobile menu
------------------------------------------------------------------------- */


#show-overlay{
	display:none;
}
@media screen and (max-width: 1200px) {
  #show-overlay{ display:inline-block; }
}
 /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
   
  background-color: #6b9003;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 9%; /* 7% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 10px;
  text-decoration: none;
  font-size: 25px;
	font-family: 'courier_primebold';
	line-height: 150%;
  color: #fff;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
	/* border-bottom: solid 1px #91cd84; */
	
	
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus { color: #ccdc9f;}

/* Position the close button (top right corner) */
.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; }

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.mobile-nav-divider{ margin: 0 auto; max-width: 550px; height: 1px; background-color: #fff;}

/* Accordion
------------------------------------------------------------------------- */
.accordion {

  cursor: pointer;
  padding: 0px 0 8px 0;
  width: 100%;
  border: none;
  outline: none;
  font-size: 19px;
  transition: 0.4s;
	border-radius: 7px;
	text-align: left;
background-color: var(--color-1); color: var(--color-3);
}


@media screen and (max-width: 500px) {
	.accordion {font-size: 16px;}
}

.active, .accordion:hover {
  background-color:var(--color-1-l2);
}

.panel {
  padding: 0 0 0 60px;

  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel a{
	text-decoration: none;
	color: var(--color-7);
	display: inline-block;
	padding: 5px 0;
	transition: color 0.5s;
}
.panel a:hover{
	text-decoration: none;
	color: var(--color-1);

}
/* form
------------------------------------------------------------------------- */
.intext, textarea{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;
	padding: 20px;
	font-family:'opensans-bold';
	font-size:100%;
	color: #4b4237;
	border: solid 0px #bccf00;
}
.intext2{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding: 3px;
	font-family:'opensans-bold';
	font-size:100%;
	color: #4b4237;
	border: solid 0px #bccf00;
}
.intext{ margin-bottom: 12px;}
.insubmit{padding: 22px; background-color: #fff; font-size: 20px;
	font-family:'opensans-bold';
	color:#002e5f;font-weight: bold;font-size:100%; border: none; border-radius: 7px;}
		
		input[type="submit"]:hover {

			cursor: pointer; 
}
.request{
			color: #fff; background-color: var(--color-3); padding:50px; text-align: center; font-weight: bold; max-width: 800px; margin: 20px auto; border: solid 7px #fff; border-radius: 8px;
		}
.contactnumber{ display: none;}