* {	box-sizing: border-box;}

body { width:80%; margin-left: auto; margin-right: auto; margin-top:0; padding:0; border:0;
   font: 18px Calibri,Arial,Helvetica; color:#6b4626; background-color: #f1daba;} 

p {font: 18px Calibri,Arial,Helvetica;}

.clear {clear: both;}

a:link { color: blue }
a:visited { color: purple }
a:hover { color: purple }
a:active { color: red }

@keyframes slidy {
0% { left: 0%; }
15% { left: 0%; }
20% { left: -100%; }
35% { left: -100%; }
40% { left: -200%; }
55% { left: -200%; }
60% { left: -300%; }
75% { left: -300%; }
80% { left: -400%; }
95% { left: -400%; }
100% { left: -400%; }
}

div#slider { overflow: hidden; padding:0; border:0; margin:0; border-radius: 0 0 10px 10px;}
div#slider figure img { width: 20%; float: left; padding:0; border:0; margin:0;}
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: slidy 25s infinite;
}

div#top-image { width:100%;overflow: hidden; margin:0; border:0; padding:0; height:auto; border-radius: 0 0 10px 10px; }
div#top-image img {width:100%;height:auto;}
.topnav { overflow: hidden; background-color: #e9bc84; border-radius: 10px 10px 10px 10px; }

.topnav a {
  float: left;
  display: block;
  color: #6b4626;
  text-align: center;
  padding: 14px 15px;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
}

.topnav a:hover {
  background-color: #6b4626;
  color: #e9bc84;
}

.topnav .icon {
  display: none;
}

.top-image {width:100%; float:left; height:auto; border:0; margin:0; padding:0;overflow: hidden;}
.top-image2 {width:800px; float:left; height:200px; border:0; margin:0; padding:0;overflow: hidden;}
.top-image-img {max-width: 100%; height:auto; border:0; margin:0;}

.container-normal, .container-normal70, .container-tausch  {float:left;width:100%;margin-top:20px}

.spalte-links-100 {box-sizing: border-box; width:100%; margin-right: 25px ;float:left ;margin-left:5px} 
.spalte-links-50, .spalte-links-50a, .spalte-links-70 {width:48%;float:left; margin-right: 20px;margin-left:5px}
.spalte-links-70 {width:70%;} 
.spalte-links-60 {box-sizing: border-box; width:60%; margin-right: 25px ;float:left ;margin-left:5px} 
.spalte-links-30 {float:left; width:30%;margin-right: 5px;margin-left:5px} 
.spalte-rechts-50, .spalte-rechts-40, .spalte-rechts-30  {width:48%;float:right; margin-right: 5px;}
.spalte-rechts-30 {width:25%;}
.spalte-rechts-40 {box-sizing: border-box; width:35%;}

.homepage-head1, .homepage-head2 {font-size: 24px; font-weight:bold; font-family: Calibri,Arial,Helvetica; margin-bottom:20px; width:80%; margin-left:auto; margin-right:auto;text-align:center }
.homepage-head2 {font-size: 22px; margin-bottom:25px; }
.homepage-textcontainer {width:50%; float:left;}
.homepage-text	{font-size: 20px; font-family: Calibri,Arial,Helvetica; float:left;  }
.hpabsatz {margin-bottom:5px;font-size: 2px;}

h1 {font-size: 22px; font-weight:bold; font-family: Calibri,Arial,Helvetica; }
h2 {font-size: 20px; font-weight:bold; font-family: Calibri,Arial,Helvetica; }

a.button {
    -webkit-appearance: button;    -moz-appearance: button;    appearance: button; font: 24px; font-weight: bold; font-family: Calibri,Arial,Helvetica;
    text-decoration: none;    color: #6b4626;   background-color: #e9bc84; text-align:center;border: 1px solid #6b4626;
    border-radius: 5px 5px 5px 5px; width:50%; margin-left:auto;  margin-right:auto; display:block; margin-top:10px;
}

img {border-radius: 10px 10px 10px 10px;}
img.fb {border-radius: 0px 0px 0px 0px;}
.container2 {background:#e9bc84;margin:20px auto;padding:1.5%;width:100%;cursor: pointer; 
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
box-shadow:1px 1px 5px #111;-moz-box-shadow:1px 1px 5px #111;-webkit-box-shadow:1px 1px 5px #111;
}

.zom {width:19.3%;height:auto;    border: 1px solid black;}

.zom:hover, .zom:active {cursor: pointer;  cursor: -moz-zoom-in; cursor: -webkit-zoom-in; -webkit-user-select: none; -webkit-touch-callout: none}
.zom:hover:nth-child(5n+1), .zom:active:nth-child(5n+1) {transform: translate(80%,80%) scale(2.5);}
.zom:hover:nth-child(5n+2), .zom:active:nth-child(5n+2) {transform: translate(80%,80%) scale(2.5);}
.zom:hover:nth-child(5n+3), .zom:active:nth-child(5n+3) {transform: translate(80%,80%) scale(2.5);}
.zom:hover:nth-child(5n+4), .zom:active:nth-child(5n+4) {transform: translate(-80%,80%) scale(2.5);}
.zom:hover:nth-child(5n+5), .zom:active:nth-child(5n+5) {transform: translate(-80%,80%) scale(2.5);}



.img-spalte50 {max-width:100%; height:auto; max-height:300px; display:block; margin-left: auto; margin-right: auto;}
.headline-container {font-size: 22px; font-weight:bold; font-family: Calibri,Arial,Helvetica;margin-top:10px;}
.anfrageform {width:50%; float:left;display:block; margin-left: auto; margin-right: auto; }

form {width: 100%; padding-top: 3em; position: relative; text-align: left;}
table{width:100%}
table#tabelle70 {width: 70%; margin-left:auto; margin-right:auto;}
table#tabelle50 {width: 50%; margin-left:auto; margin-right:auto;}
table#kontakt {	border: 1px solid;	margin: 5px; border-radius: 5px 5px 5px 5px;}

input#feld, textarea {	margin: 0 0 16px 42%; padding: 10px 15px; width: 55%; background-color: #fffbf0; border: 1px solid #e7c157; border-radius: 5px}
textarea {height:6em;}
label { text-align: right; line-height: 1.5; width: 40%; position: absolute; left: 0; }
label#check { text-align: right; line-height: 1.5; width: 40%; position: relative; left: 20px; }
label::after { content: ": "; }
label#check::after{ content: ""; }
button { width:30%; height:2em;margin-left: 10%; border-radius: 5px;font: 16px Calibri,Arial,Helvetica;  color: #6b4626;
  background-color: #e9bc84;
 }
button#button2 { width:100%;}

input#feld:required + label::before { position: absolute; left: 250%; content: "★"; 	color: red; }
textarea:required + label::before { position: absolute; left: 250%; content: "★"; 	color: red; }

input#feld:required:valid + label::before { content: "✔"; color: green; }
textarea:required:valid + label::before { content: "✔"; color: green; }

fieldset {border: 1px solid #e7c157; border-radius: 5px;	margin: 0 0 1em 42%; padding: 10px 15px; width: 55%; background-color: #fffbf0;}

tr {	}
tr#preise {height:2.5em; }
th {	padding: 5px 10px; font-weight: bold;}
th#erste {font-size:20px;}
th#zweite { font-size:18px; border-bottom: 1px; border-bottom-style:  solid; border-bottom-color:  #e9bc84; text-align:center;}
td {	padding: 0px 10px;}
td#preise {text-align: center; border-bottom: 1px; border-bottom-style:  solid; border-bottom-color:  #e9bc84;}

.quelle {font-size: 10px;  font-family: Calibri,Arial,Helvetica;}
.quelle:before {content: "Quelle: ";}

.kalender {width:40%; float:left;margin-left: auto; margin-right: auto;}
.kalenderadmin {width:100%; display:block; margin-left: auto; margin-right: auto;}
.kalenderueberschrift {box-sizing: border-box;float:left;width:75%; display:block;text-align: center; font-size: 24px; font-weight:bold; font-family: Calibri,Arial,Helvetica;margin-top:10px;margin-bottom:20px;}
.kalendernavi, .kalendernavi2 {box-sizing: border-box;float:left;width:10%;font-size:32px;vertical-align: middle;}
.kalendernavi2 {float:right;}
.kalenderwochentag, .kalenderzelle, .kalenderzellerot, .kalenderzellegruen, .kalenderzelledrot {box-sizing: border-box; float:left; width:13%; height:30px; margin: 2px 2px; font-size: 20px; text-align: center; font-weight: bold; }
.kalenderzelle, .kalenderzellerot, .kalenderzellegruen, .kalenderzelledrot   {font-size:18px; padding-top:5px; vertical-align:middle;}
.kalenderzellerot   {background-color: red; color:white; }
.kalenderzellegruen {background-color: green; color:white;}
.kalenderzelledrot  {background-color: darkred; color:white;}
a#kal {text-decoration: none; color:#6b4626;}
a#kal:visited {text-decoration: none; color:#6b4626;}
.notizen, .notizzelle, .notizzellerot, .notizzellegruen, .notizzelledrot 
	{box-sizing: border-box; float:left; width:13%; height:90px; margin: 2px 2px; font-size:18px; text-align: center;}
.notizen, .notizzellerot, .notizzellegruen, .notizzelledrot 
	{width:100%;height:30px;margin: 2px 2px; padding-top:5px; vertical-align:middle;}
.notizzellerot 		{background-color: red; color:white;}
.notizzellegruen 	{background-color: green; color:white;}
.notizzelledrot  	{background-color: darkred; color:white;}
.notizen {font-size:12px; color:black;}


/*************************************************************************************************************************************/
/************************ Mobile Version iPads(Landscape) Quer *****************************************/
/************************************************************************************************************************************/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape),
			screen and (max-width : 1024px)
{
.reframe    { max-width: 1024px }
html {width: 100%; margin:0; padding: 0;font-size:100%;} 
body {width: 100%;  -webkit-text-size-adjust:100%; font: 18px Calibri,Arial,Helvetica;} 

.topnav a {padding: 10px 15px;  font-size: 18px;  font-weight: bold;}

.container {float:left;width:100%;margin-top:20px}
.spalte-links-50, .spalte-links-50a {width:48%;float:left; margin-right: 20px;margin-left:5px}
.spalte-links-30 {width:60%;}
.spalte-rechts-50 {width:48%;float:right; margin-right: 5px;}

.homepage-head1 {font-size: 22px; font-weight:bold; margin-bottom:20px; width:100%; }
.homepage-head2 {font-size: 20px; font-weight:bold; margin-bottom:25px; width:100%; }
.homepage-textcontainer {width:50%; float:left;margin-left:5px}
.homepage-text	{font-size: 18px; }

a.button { height: 4em; font-weight: bold; width:50%;  margin-top:10px;}

.img-spalte50 {max-width:100%; height:auto; max-height:250px;display:block; margin-left: auto; margin-right: auto;}
.headline-container {font-size: 22px; font-weight:bold; font-family: Calibri,Arial,Helvetica; }

.anfrageform {width:60%;}

table#tabelle70 {width: 80%;}
table#tabelle50 {width: 80%;}

tr {	}
th {	padding: 5px 10px; font-weight: bold;}
th#erste {font-size:20px;}
th#zweite {font-size:18px; border-bottom: 1px; border-bottom-style:  solid; border-bottom-color:  #e9bc84;}
td {	padding: 0px 15px;}
td#preise {text-align: center;}

}
/*************************************************************************************************************************************/
/***************************** Mobile Version iPads(Portrait) Hoch  *****************************************/
/*************************************************************************************************************************************/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
			screen and (max-width : 768px)
{
.reframe             { max-width: 1024px; }
html{font-size:100%;}
body { -webkit-text-size-adjust: 100%; width: 98%; font: 22px; }
.topnav a {  padding: 10px 13px;  font-size: 15px;  font-weight: bold;}
.spalte-links-30 {width:60%;}
.spalte-links-60 {width:100%;}
.spalte-rechts-40 {width:80%; float:left; padding-top: 20px;}
.spalte-links-50a {width:80%;} 
table#tabelle70 {width: 80%;}
table#tabelle50 {width: 80%;}

.anfrageform {width:60%;}

a.button { font-weight: bold; width:70%; height:4em; margin-top:10px;}

.zom {width:24%;height:auto;    border: 1px solid black;}

.zom:hover, .zom:active {cursor: pointer;  cursor: -moz-zoom-in; cursor: -webkit-zoom-in; -webkit-user-select: none; -webkit-touch-callout: none}
.zom:hover:nth-child(4n+1), .zom:active:nth-child(4n+1) {transform: translate(80%,80%) scale(2.5);}
.zom:hover:nth-child(4n+2), .zom:active:nth-child(4n+2) {transform: translate(80%,80%) scale(2.5);}
.zom:hover:nth-child(4n+3), .zom:active:nth-child(4n+3) {transform: translate(-80%,80%) scale(2.5);}
.zom:hover:nth-child(4n+4), .zom:active:nth-child(4n+4) {transform: translate(-80%,80%) scale(2.5);}
}

/*************************************************************************************************************************************/
/****************************************************Smartphones (Landscape & Portrait) **********************************************/
/*************************************************************************************************************************************/
@media only screen and (min-device-width:320px) and (max-device-width:767px),
			screen and (max-width : 767px)
{
html{}
body {-webkit-text-size-adjust: 100%; width: 95%; }
.topnav a {  padding: 10px 10px;  font-size:22px; font-weight: bold;}

.topnav a:not(:first-child) {display: none;}
.topnav a.icon {    float: right;    display: block;    font-size:18px;  }
.topnav.responsive {position: relative;}
.topnav.responsive .icon {    position: absolute;    right: 0;    top: 0;  }
.topnav.responsive a {    float: none;    display: block;    text-align: left;  }
  
.container-normal, .container-tausch {display:table;float:none;width:100%;margin-top:10px;}
.spalte-links-70, .spalte-links-60, .spalte-links-50, .spalte-links-50a  {box-sizing: border-box;width:100%; float:left; margin-top:10px;margin-left:0px;margin-right:0px;}
.spalte-links-30 {box-sizing: border-box;width:45%; float:left; margin-top:10px;margin-left:10px;margin-right:10px;}
.spalte-rechts-50{width:100%; float:none; margin-top:10px;margin-left:0px;margin-right:0px;}
.spalte-rechts-30, .spalte-rechts-40  {width:100%;}

.container-tausch .spalte-links-50  {display:table-footer-group;float:none;margin-top:10px;}
.container-tausch .spalte-rechts-50 {display:table-header-group;float:none;margin-top:10px;}

.homepage-head1 { margin-bottom:20px; width:100%; }
.homepage-head2 { margin-bottom:25px; width:100%; }
.homepage-textcontainer {width:100%; float:left;margin-left:5px}
.homepage-text	{ }

a.button { font-weight: bold; width:30%; height:4em; margin-top:10px; border-radius:5px;}

.img-spalte50 {margin-left: auto; margin-right: auto;}
.headline-container {font-weight:bold; font-family: Calibri,Arial,Helvetica; margin-bottom:10px; }

.anfrageform {width:90%;margin-left: auto; margin-right: auto;}
button { width:44%; margin-left: 5%; height:2em;}
.table {table-layout: fixed}

table#tabelle70 {width: 100%;}
table#tabelle50 {width: 100%;}

tr {	}
th {font-size:16px;	padding: 5px 2px; font-weight: bold;}
th#erste {}
th#zweite {font-size:16px;border-bottom: 1px; border-bottom-style:  solid; border-bottom-color:  #e9bc84;}
td {font-size: 16px;	padding: 0px 2px;}
td#preise {text-align: center;}
fieldset {padding: 10px 2px;}
label {font-size:16px; display:inline;}
label#check{width:80%;left: 5px;}

form {width: 90%;}
.container2 {width:100%;margin:20px auto;padding:2%;}

.zom {width:31.5%;height:auto;    border: 1px solid black; }

.zom:hover, .zom:active {cursor: pointer;  cursor: -moz-zoom-in; cursor: -webkit-zoom-in; -webkit-user-select: none; -webkit-touch-callout: none}
.zom:hover:nth-child(3n+1), .zom:active:nth-child(3n+1) {transform: translate(80%,80%) scale(2.5);}
.zom:hover:nth-child(3n+2), .zom:active:nth-child(3n+2) {transform: translate(0%,80%) scale(2.5);}
.zom:hover:nth-child(3n+3), .zom:active:nth-child(3n+3) {transform: translate(-80%,80%) scale(2.5);}
.kalender {width:100%;}

}


/*************************************************************************************************************************************/
/****************************************************Smartphones ( Portrait) **********************************************/
/*************************************************************************************************************************************/
@media only screen and (min-device-width:320px) and (max-device-width:767px)  and (orientation: portrait),
			screen and (max-width : 767px) and (orientation: portrait)

{
html {font-size:100%;}
body { -webkit-text-size-adjust: 100%; width:95%;  } 

.topnav a {  padding: 10px 20px;  font-weight: bold;}

.topnav a:not(:first-child) {display: none;}
.topnav a.icon {    float: right;    display: block;  }
.topnav.responsive {position: relative;}
.topnav.responsive .icon {    position: absolute;    right: 0;    top: 0;  }
.topnav.responsive a {    float: none;    display: block;    text-align: left;  }
.zom {}

.zom:hover, .zom:active {cursor: pointer;  cursor: -moz-zoom-in; cursor: -webkit-zoom-in; -webkit-user-select: none; -webkit-touch-callout: none}
.zom:hover:nth-child(3n+1), .zom:active:nth-child(3n+1) {transform: translate(80%,80%) scale(2.5);}
.zom:hover:nth-child(3n+2), .zom:active:nth-child(3n+2) {transform: translate(0%,80%) scale(2.5);}
.zom:hover:nth-child(3n+3), .zom:active:nth-child(3n+3) {transform: translate(-80%,80%) scale(2.5);}
.spalte-links-30 {width:100%;}
a.button { font-weight: bold; width:70%; height:4em; margin-top:10px;border-radius:5px;}

.table {table-layout: fixed}
.kalenderwochentag, .kalenderzelle, .kalenderzellerot, .kalenderzellegruen, .kalenderzelledrot  {width:12.5%}
}