

@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   src: url('../font/Montserrat-Light.ttf') format('truetype'); 
}

/*
green 100 | 73,105,15 oklch(0.4785 0.1183 128.28)
green 60 | 140, 169, 102 oklch(0.6965 0.0974 127.8)
green 40 | 181,201,154 oklch(0.8086 0.0675 126.6)
*/

:root {
	/* Farben */
  --color-accent: rgba(73,105,15,0.75);
  --color-accent-dark: rgba(73,105,15,1);
  --color-accent-light: rgba(73,105,15,0.1);
  --color-accent-light-light: rgba(73,105,15,0.05);
  --color-accent-medium: rgba(73,105,15,0.4);
  --color-accent-light-medium: rgba(73,105,15,0.2);
  
  --color-text-light: rgba(100,100,100,1);
  --color-black: rgba(33,33,33,1);
  --color-white: rgba(255, 250, 245,1);
  
   --color-error: rgba(231, 76, 60,1);
   --color-error-light: rgba(237,163,196,0.3);
   

	/* Gradient */
   /*--gradient-accent:    linear-gradient(90deg, var(--color-accent-dark), var(--color-accent), var(--color-accent-dark));*/
    --gradient-gray:    linear-gradient(90deg, var(--color-gray-dark), var(--color-gray-medium-dark), var(--color-gray-dark));
   /*--color-section-bg90-02: rgba(90, 90, 90, 0.2);*/
   
   /* Typografie */
  --font-primary:   'Montserrat', sans-serif;
  /*--font-secondary: 'Montserrat', 'Helvetica Neue', sans-serif;*/
  --font-size-base: 1.15em; /*18px;*/ /*16px*/
  --line-height:    1.5;
   
}

*, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {  
  scroll-behavior: smooth;
  font-size: var(--font-size-base);
  overflow-y: scroll;
  text-align: center;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  scrollbar-gutter: stable;
}


body {
	/*background-color:rgb(255,255,255);*/
 font-family: var(--font-primary);
 font-weight: normal; 
 line-height: var(--line-height);
 color: var(--color-text-light);
 background-color: var(--color-white);
	overflow:scroll;
	overflow-x:hidden;
	
 text-align: center;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;	  
/*	font-size:1em;
	color:rgb(100,100,100);
	margin:0;
	padding:0;
	height:auto;
	display: -ms-grid;
	display:grid; 
	align-content:top;
	justify-content: center;*/
 
}

/*
body {
 font-family: var(--font-primary);
  font-weight: normal; 
  line-height: var(--line-height); 
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}*/

/***********************************/
a:active,a:focus,a, img{
outline:none;
outline-style: none;
/*border:none;*/
outline:none;
}
/***********************************/

body.grande{
	grid-template-rows:auto auto auto auto;
	grid-template-columns:auto auto auto;
}

body.pico{
	grid-template-rows:auto auto auto auto;
	grid-template-columns:auto auto auto;
}


allbg{
margin: 0 auto;
opacity:0.35;
width:100vw;
height:100vh;
position:fixed;
z-index:1;
top:0;
/*background:linear-gradient(90deg,rgba(73,105,15,0.05), rgba(73,105,15,1.0) 50%, rgba(73,105,15,0.05));*/
}


extrabg{
margin: 0 auto;
width:100%;
display:block;
z-index:1;
padding:0;

left:0;
right:0;

position:absolute;
background-color:var(--color-accent-light-light);
}

extrabgf{
margin: 0 auto;
width:100%;
display:block;
z-index:1;
padding:0;
padding-top:2%;
padding-bottom:2%;
left:0;
right:0;
position:absolute;
background-color:var(--color-accent-light-light);

}

bem{
margin: 0 auto;
/*background-color:rgba(255,255,255,1);*/
/*background:linear-gradient(90deg,rgba(255,255,255,1), rgba(255,255,255,0.95) 70%, rgba(255,255,255,0.8));*/
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
padding:0;
z-index:2;
position:relative;
max-width:1500px;

	display:block;
	text-align:left;
	
}

.grande bem{
/*min-height:100vh;*/
width:85vw;
min-width:780px; /*!!!!!!!!*/
max-width:1500px;/*!!!!!!!!*/

}

.pico bem{
/*min-height:100vh;*/
width:90vw;
min-width:350px;

}

anyblock{
margin: 0 auto;
display:block;
width:96%;
padding:2%;
border-bottom:1px solid var(--color-accent-medium);
content-visibility:auto;
}

anyblock.last{
border:none;
}
/*********************************/
.grande .IL{
margin: 0 auto;
width:45%;
margin-right:5%;
float:left;
margin-bottom:2em;
margin-left:0;
}
.grande .DL{
margin: 0 auto;
display:table;
/*float:left;*/
margin-bottom:2em;
}
.grande .DR{
margin: 0 auto;
display:table;
/*float:right;*/
margin-bottom:2em;

}

.grande .IR{
margin: 0 auto;
width:45%;
margin-left:5%;
float:right;
margin-bottom:2em;
right:0;
}

.pico .IL,.pico .IR{
margin: 0 auto;
width:100%;
margin-bottom:2em;
}

.IL img, .IR img{
width:100%;
}

.IL span, .IR span{
padding:0.5em;
font-size:85%;
color:var(--color-accent-dark);
}

.pico .DL,.pico .DR{
margin: 0 auto;
margin-bottom:2em;
}
/******************************************/

.karou{
margin: 0 auto;
/*height:300px;*/
height:auto;
}

.karouitem{
margin: 0 auto;
text-align:center;
display:table;
padding:0;

overflow:hidden;
width:auto;
/*margin-left:1.5em;
margin-right:1.5em;*/

/*border-top:1px solid rgba(73,105,15,0.4);
border-bottom:1px solid rgba(73,105,15,0.4);*/
content-visibility:auto;

background-size: cover;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-position: horizontal-position vertical-position;
}

.karouinfo{
margin: 0 auto;
display: -ms-grid;
display:grid;
grid-template-rows:2em 1fr auto 2em;
grid-template-columns:2em 1fr auto 2em;
/*min-height:45vh;*/
width:100%;
}

.karouinfo slickinfo{
margin:0 auto;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background-color:var(--color-accent);
padding:1em;
color:var(--color-white);
text-align:left;
display:table;
max-width:650px;
width:auto;
}

.pico .karouinfo slickinfo{
padding:0.5em;
}

.grande slickinfo h2{
font-size:130%;
font-weight:bold;
text-transform:uppercase;
line-height:1.8em;
}

.pico slickinfo h2{
font-size:110%;
font-weight:bold;
text-transform:uppercase;
line-height:1.5em;
}

.pico slickinfo p{
font-size:90%;
line-height:1.3em;
}

slickinfo .toany{
margin: 0 auto;
padding:1em;
display:table;
border:2px solid var(--color-white);
color:var(--color-white);
text-decoration:none;
background-color:var(--color-accent-light-medium);
margin-right:0;
margin-top:0.9em;
}

.pico slickinfo .toany{

padding:0.5em;
border:2px solid var(--color-white);
margin-top:0.6em;
}

slickinfo .toany:hover{
background-color:var(--color-white);
color:var(--color-accent-dark);
}
/**************************************/

.toform{
margin: 0 auto;
padding:1em;
display:table;
border:2px solid var(--color-accent);
color:var(--color-accent);
text-decoration:none;
background-color:var(--color-white);
}

.toform:hover{
background-color:var(--color-accent-dark);
color:var(--color-white);
border:2px solid var(--color-accent-dark);
}

.grande bem h1{
margin: 0 auto;
margin-left:2%;
margin-top:2%;
margin-bottom:2%;
width:30%;
max-width:280px;
}

.pico bem h1{
margin: 0 auto;
margin-left:1.3em;
margin-top:1.3em;
width:33%;
margin-bottom:1.3em;
/*max-width:400px;
min-width:120px;*/
}


bem h1 img{
width:100%;
}

/****************************/
/*.icon::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}*/
/****************************/

.totogg{
text-decoration:none;

}

/*hier war anyblock!*/

/******************************************/

a.pdf{
text-decoration:none;
color: var(--color-accent-dark);
font-size:135%;
padding-bottom:0.3em;
border-bottom:1px solid var(--color-accent-dark);
line-height:1.9em;
}
a.pdf:hover{
opacity:0.75;
}
.pico a.pdf{
font-size:100%;
}

a.textlink{
text-decoration:none;
color: var(--color-accent-dark);
font-size:115%;
padding-bottom:0.3em;
border-bottom:1px solid var(--color-accent-dark);
}
a.textlink:hover{
opacity:0.75;
}

footer{
margin: 0 auto;
width:100%;
padding:0;
padding-bottom:1.5em;
color:var(--color-text-light);
font-size:110%;
text-align:center;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
z-index:2;
position:relative;
background-color:var(--color-accent-light-light);
margin-top:3em;
}

/*.grande footer{
width:85vw;
min-width:780px; 
max-width:1300px;
}
.pico footer{
width:90vw;
min-width:350px;
}*/


footer .fblock{
margin: 0 auto;
padding-left:2%;
padding-right:2%;
display:table;
}

footer h4{
color:var(--color-accent-dark);
font-weight:normal;
font-size:120%;
text-transform:uppercase;
margin-bottom:0.9em;
margin-top:0.9em;
}


footer p{
margin: 0 auto;
padding-bottom:0.7em;
}

ende{
margin: 0 auto;
font-size:90%;
/*display:block;*/
position:relative;
padding:0;
width:100vw;
max-width:100%;
margin-left:0;
margin-right:0;
text-align:center;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
z-index:2;
overflow:hidden;
left:0;
right:0;
}

ende p{
margin: 0 auto;
padding:2em;
}

ende p span{
white-space:nowrap;
}

footer a, ende a,a.txtLink{
color:var(--color-accent-dark);
}
footer a:hover, ende a:hover,a.txtLink:hover{
opacity:0.7;
}


#zertilogo{
margin: 0 auto;
display:table;
width:120px;
max-width:80%;
text-decoration: none;
}
#zertilogo img{
width:100%;
}

/***************************************/

.naviicon{
	margin:0 auto;
	position:fixed;
	right:1.5em;
	top:1.5em;
	text-align:center;
	display:table;
	z-index:100;
	background-color:var(--color-white);
}


.naviicon a{
	margin:0 auto;
	display:table;
	text-decoration:none;
	padding:0.8em;
}


.naviicon a i{
	margin:0 auto;
	display:block;
	border-top:0.1em solid var(--color-white);
	border-bottom:0.1em solid var(--color-accent-dark);
	line-height:0.2em;
	height:0em;
	padding:0;
	margin-bottom:0.6em;
	
	width:3em;
}

.naviicon:hover a i{
	border-bottom:0.1em solid var(--color-white);
	border-top:0.1em solid var(--color-accent-dark);
}

navigation{
margin: 0 auto;
top:0;
right:0;
bottom:0;
position:fixed;
text-align:left;
height:100%;
z-index:101;
background-color:var(--color-white);
border-left:1px solid var(--color-accent-light-medium);
overflow:scroll;
overflow-x:hidden;
	max-width:100vw;
}

navigation innernavi{
margin: 0 auto;
display:table;
text-align:left;
margin:1.5em;
height:auto;

}

navigation innernavi a{
margin: 0 auto;
display:block;
margin-left:0;
text-align:left;
text-decoration: none;
/*color:rgba(73,105,15,0.8);*/
color:var(--color-black);
padding:0.2em;
margin-top:0.5em;
border-bottom: 1px solid var(--color-accent-light-medium);
}

navigation innernavi sub{
	margin: 0 auto;
	display:table;
	margin-left:1.2em;
	font-size:90%;
	margin-bottom:1.4em;
	max-width:80%;
}

navigation innernavi sub a{
	margin-top:0.3em;
}

navigation innernavi a:hover, navigation innernavi a.aktiv{
border-bottom: 1px solid var(--color-accent-dark);
color:var(--color-accent-dark);
}

navigation .naviclose{
margin: 0 auto;
display:table;
text-align:left;
text-decoration: none;
color:var(--color-accent-dark);
padding:0.4em;
margin-bottom:0.5em;
font-size:145%;
margin-left:0em;
/*z-index:102;*/
background-color:var(--color-white);
}

navigation .naviclose:hover{
background-color:var(--color-accent-dark);
color:var(--color-white);
}
/******************************************/

a.totop{
margin: 0 auto;
position:fixed;
right:0.3em;
bottom:0.3em;
padding:0.3em;
text-decoration:none;
z-index:20000;
opacity:0.65;
font-size:180%;
color:var(--color-accent-dark);
}

a.totop img{
width:50px;
}

a.totop:hover{
opacity:1.0;
}

keinumbruch{
white-space:nowrap;
}

.CL{
clear:left;
line-height:0;
}
.CR{
clear:right;
line-height:0;
}
.CB{
clear:both;
line-height:0;
}
/*
green 100 | 73,105,15
green 60 | 140, 169, 102
green 40 | 181,201,154
*/

cookieinfo{
margin: 0 auto;
background-color:var(--color-accent);
border:0.1rem solid var(--color-white);
display:block;
position:fixed;
bottom:2em;
left:2em;
right:2em;
z-index:1200;
padding:1.3rem;
text-align:center;
color:var(--color-white);

border-radius:2rem;
max-width:1200px;
}

cookieinfo a{
color:var(--color-white);
font-weight:bold;
text-decoration:underline;
}

feedback{
margin: 0 auto;
background-color:var(--color-error);
/*border:0.3rem solid var(--color-white);*/
display:block;
position:fixed;
top:15%;
left:2em;
right:2em;
z-index:1250;
padding:1.5em;
text-align:center;
color:var(--color-white);
font-weight:bold;
font-size:120%;
border-radius:2rem;
max-width:1200px;
}
feedbackOK{
margin: 0 auto;
background-color:var(--color-accent-dark);
/*border:0.3rem solid var(--color-white);*/
display:block;
position:fixed;
top:15%;
left:2em;
right:2em;
z-index:1260;
padding:1.5em;
text-align:center;
color:var(--color-white);
font-weight:bold;
font-size:120%;
border-radius:2rem;
max-width:1200px;
}
feedback a,feedbackOK a{
color:var(--color-white);
font-weight:bold;
text-decoration:underline;
}

.Cclose{
margin: 0 auto;
font-size:170%;
/*background-color:rgba(73,105,15,1);*/
/*background:radial-gradient(var(--color-accent-dark) 25%,var(--color-white)75%);*/
font-family: "Font Awesome 5 Free";
font-weight: 900;
/*background-image:url("../img/close.png");*/
/*content: "\f057";*/
/*width:40px;
height:40px;*/
padding:0.4rem;
display:table;
right:0.2rem;
top:0.2rem;
z-index:1202;
position:absolute;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}


.Cclose:hover{
/*color:rgba(243,243,243,1.0);*/
-webkit-transform: scale(1.2);
 transform: scale(1.2);
}
