* {
	margin: 0;
	padding: 0;
	font-family: Calibri, Arial;
}
/*body {
    margin-left: auto; margin-right: auto;
} */
body {
	display: grid;
	display: -ms-grid;
	max-width: 1195px; /* +5px Rand = 1200px*/
	grid-template-areas:
	"a h"
	"a b"
	"a f";
	grid-template-rows: auto auto auto;
	grid-template-columns: 11em auto;
	-ms-grid-columns: 11em auto;
	margin: 0px auto 0px auto;
}
/* h1, */
h3 {
	margin: 10px 0px 10px 0px;
}
h1 {font-size: 1.6em;}
h2 {font-size: 1.3em;}
caption {font-size: 1.1em;}
form {
	max-width: 700px;
	margin: 5px auto 5px auto;
	font-size: 1.0em;
}
header {
	grid-area: h;
	-ms-grid-row: 1;
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	background-color: #8ead97;
	width: 100%;
	height: auto;
	padding: 5px 0;
	border-right: 5px solid #8ead97;
}
header h1 {text-align: center;}
.imgkorb, .imgrab {
	border: 0px;
	height: 79px;
}
.imgkorb {
	margin-left: 2px;
	margin-top: 0px;
}
.imgrab {
	margin-right: 2px;
	margin-top: 0px;
}
nav {
	grid-area: a;
	-ms-grid-row: 1;
	-ms-grid-row-span: 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	min-height: 260px;
	font-size: 1.0em;
	text-align: left;
	background-color: #8ead97;
	padding: 10px 0px 0px 0px;
}
nav ul {
	list-style-type: none;
	margin: 10px 0px 0px 15px;
	padding: 0;
}
nav ul li {
	font-size: 1.1em;
	margin: 0px 10px 0px 0px;
	padding: 3px 0px 5px  0px;
	border-bottom: 1px black solid;
	display: block;
}
nav a {text-decoration: none;}
nav a{color: black;}
nav a:visited{color: black;}
nav a:active{color: #96513D;}
nav a:hover{color: white;}
.li2 {font-size: 0.82em;}
nav button {
	background-color: #c0d1c5;
	border: none;
	color:#1f1f1f;
	padding: 10px 15px 10px 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 0.9em;
	cursor: pointer;
	-webkit-transition-duration: 0.5s; /* Safari 111*/
	transition-duration: 0.5s;
}
nav button:hover {
  background-color: #C9D8CD;
  color: black;
}
nav ul li ul {
	display: block;
	position: absolute;
	max-height: 0px;
	width: 5.5em;
	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	background-color: #96b39c;
	opacity: 0;
	padding: 3px;
	overflow: hidden;
		
/*	top: 227px;
	text-align: left; transition: all 0.5s ease; max-height 0.5s, opacity 0.7s; all 0.6s ease;
	margin: 0px 0px 0px 54px;
  padding: 4px 6px 4px 6px;
	transition: max-height 0.4s linear, opacity 0.3s linear; */
}
nav ul li:hover > ul {
	display: block;
	position: absolute;
	max-height: 5.5em;
	margin-top: 1px;
	z-index: 1;
	opacity: 1;
	transition: max-height ease-out 0.8s 0.1s, opacity ease-out 0.1s 0.1s;
}
nav ul li ul li {
	padding: 0;
	margin: 0;
	border-bottom: none;
	font-size: 0.9em;
	line-height: 1.5em;
}
nav ul li ul li a {
/*	line-height: 2em; */
}
main {
	grid-area: b;
	-ms-grid-row: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	display: inline-block;
	width: 100%;
	background-color: #c0d1c5;
	text-align: center;
	border-right: 5px solid #8ead97;
}
main h2 {
	margin: 0px 0px 0px 0px;
	padding: 16px 0px 16px 0px;
	border-bottom: 1px black solid;
} 
.clear {clear: both;}
footer {
	grid-area: f;
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	display: inline-block;
	width: 100%;
	background-color: #8ead97;
	text-align: center;
	margin: 0px auto 0px auto;
	padding: 2px 0px 3px 0px;
	border-right: 5px solid #8ead97;
}
article {
	text-align: left;
}
article h3 {
	margin:  5px 15px 0px 15px;
	padding: 0;
}
article p {
	margin:  3px 15px 5px 15px;
	padding: 0;
}
#page1 {
	margin: 5px auto 0px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#page1 img {
	border-radius: 5px;
	margin: 1px 2px 0px 0px;
}
style=';'
#page1 iframe {
	overflow: hidden;
	margin: 1px;
	/* border:1px solid; border-radius:10px; border-color:transparent; */
}
#loin {
	margin-top: 10px;
	min-height: 380px;
}
#loin form {
	box-sizing: border-box;
	text-align: center;
	max-width: 20em;
	border: 1px #8EAD97 solid;
}
#loin fieldset {
	border: none;
	padding: 0;
}
#loin legend {
	width: 100%;
	text-align: center;
	padding: 3px 0px 3px 0px;
	border-bottom: 1px #8EAD97 solid;
}
#loin p {
	padding: 10px 5px 5px 5px;
	margin: 0;
	line-height: 1.2;
}
#loin button {
	padding: 3px;
	margin: 4px;
}
input[name="benutzer"],
input[name="kwort"] {
	margin: 5px 0px 5px 3px;
	padding: 4px;
}
.page6 {
	text-align: center;
	position: relative;
	background-color: #c0d1c5;
	max-width: 761px;
	min-height: 400px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	top: 0px;
	left: 0px;
}
.tx1, .tx2, .tx3 {text-align: left}
.tx1, .tx1c {
	font-size: 10pt;
	line-height: 120%;
	margin:  5px 15px;
	padding: 0;
}
.tx2, .tx2c {
	font-size: 1.1em;
	line-height: 120%;
	margin:  5px 15px 5px 15px;
	padding: 0;
}
.tx2cd {
	font-size: 1.1em;
	line-height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
	border-bottom: 1px black solid;
}
.tx3, .tx3c {
	font-size: 1.1em;
	margin:  5px 15px 5px 15px;
	padding: 0;
}
.textbl {color: blue;}
.tx3c a, .tx3c a:visited, .tx3c a:active, .tx3c a:hover{
	text-decoration: none;
	background-color: #8ead97;
	padding: 0px 5px 0px 5px;
	border-radius: 5px;
}
.tx3c a{color: black;}
.tx3c a:visited{color: black;}
.tx3c a:active{color: #96513D;}
.tx3c a:hover{color: maroon; /* font-weight: bold; #C05B39 */}

/*Tabellen-Layout*/
#tbjp, #tbk1, #tbi, #tbi2, .tbrb {
	border-collapse: collapse;
	margin-left: auto; margin-right: auto;
}
/*Tabelle-Jahresprogramm*/
#tbjp {
	max-width: 900px;
	margin-top: 10px; margin-bottom: 5px;
	padding: 0px 0px 0px 0px;
}
#tbjp td {
	border-bottom: 1px #8EAD97 solid;
	font-size: 1.0em;
	vertical-align: middle;
	text-align: left;
	width: auto;
	padding: 4px 4px 4px 4px;
}
#tbjp a {
	text-decoration: none;
	color: inherit;
}
.taktuellm {
	color: black;
	background-color: #E6E6E6;
}
.tanderm {
	color: #4f4f4f;
}
.tanderm:hover {
	color: black;
	background-color: #E6E6E6;
}
#tbjp td.tdb {
	text-align: right;
}
#tbjp td.tddgst {
	text-decoration: line-through;
}
#utbjp {
	display: inline-block;
	max-width: 610px;
	margin-left: auto;
	margin-right: auto;
}
#utbjp img {
	float: left;
	border-style: none;
	margin: 3px 5px 5px 5px;
}
/*Tabelle-Kontakt, Intern  .tbrb td*/
#tbk1, #tbi, #tbi2 {
	height: auto;
	margin-top: 10px; margin-bottom: 10px;
	padding: 0px 0px 0px 0px;
}
#tbk1, #tbi2 {max-width: 700px;}
#tbi  {max-width: 900px;}

#tbk1 td, #tbk1 th, #tbi td, #tbi th, #tbi2 td {
	vertical-align: middle;
	padding: 2px 6px 2px 6px;
}
#tbk1 td, #tbk1 th, #tbi td, #tbi th {
	border: 1px #8EAD97 solid;
}
#tbk1 td, #tbk1 th {font-size: 1.1em;}
#tbi td, #tbi th, #tbi2 td, #tbi2 th {font-size: 1.0em;}
#tbk1 td, #tbi td, #tbi2 td {text-align: left;}
#tbi caption {padding: 0px 0px 3px 0px;}
#tbk1 span {font-size: 10pt;}
/* Kontakt-Formular */
#knt legend {
	width: 100%;
	padding: 0px 0px 5px 0px;
	border-bottom: 1px #8EAD97 solid;
}
#knt {
	padding: 0px 0px 5px 0px;
}
#knt form {
	box-sizing: border-box;
	font-size: 0.9em;
	text-align: left;
	max-width: 29em;
	min-width: 20em;
	padding: 5px 3px 0px 3px;
	margin: 5px auto 0px auto;
	border: 1px #8EAD97 solid;
}
#knt .lab1 {
	display: inline-block;
	text-align: right;
	line-height: 1.5em;
	width: 29%;
}
#knt .lab2 {
	display: inline-block;
	text-align: left;
	color: #C05B39;
	line-height: 1.5em;
	width: 67%;
	padding: 0px 5px;
}
.textel {vertical-align: top;}
#knt .lab1::after {
	content: ": ";
}
#knt input, textarea {
	font-size: 0.9em;
	background-color: #fffbf0;
	border: 1px solid #8EAD97;
	outline: none;
}
#knt input {
	margin: 0px 0px 5px 3px;
}
#knt textarea {
	margin: 3px 0px 5px 3px;
	border-radius: 5px;
}
#knt input[type="text"], #knt input[type="email"], #knt textarea {
	width: 64%;
	padding: 4px;
}
#knt input[type="submit"] {
	margin-left: 13px;
	margin-right: 10px;
}
#knt input[type="submit"], #knt input[type="reset"] {
   width: auto;
   height: 1.8em;
   vertical-align: middle;
   padding: 0px 5px 0px 5px;
   font-weight: 500;
   letter-spacing: 0.1em;
   color: teal;
   border-radius: 5px;
   cursor: pointer;
}
/* Ende Kontakt-Formular */
#ulv {
	margin:  0px 20px 0px 50px;
	padding: 0px 0px 0px 0px;
}
#ulv li {
	font-size: 1.0em;
	text-align: left;
}
.imglpdf, .imgla, .dimgla {float: left; border-style: none;}
.imglpdf {margin: 0px 5px 5px 5px;}
.imgla {margin: 5px 10px 0px 0px; padding: 0px 0px 0px 0px;}
.imgk {border: 0px;  width: 24px; height: 24px; vertical-align :middle;}
.imgb1 {height: 144px; width: 192px; border: 12px ridge #8EAD97; margin-top: 4px;}
.imgra, .dimgra {float: right; border-style: none;}
.imgra {
	margin: 3px 0px 3px 10px;
	height: auto;
	width: 100%;
	max-width: 350px;
}
.dimgla, .dimgra {width: 310px;	text-align: center;}
.dimgla {margin: 5px 10px 0px -5px; padding: 0px 0px 0px 0px;}
.dimgra {margin: 5px -5px 0px 10px; padding: 0px 0px 0px 0px;}
#finanz {
	margin:  0px auto 10px auto;
}
#rabatte {
	display: inline-flex;
	margin:  0px auto 0px auto;
	padding: 0px 5px 0px 5px;
}
#rabatte img {
	float: left;
	margin:  0px 5px 0px 0px;
}
#rabatte p {
	font-size: 1.1em;
}

#galerie {
	margin:  0px auto 0px auto;
	text-align: center;
/*	max-width: 77.7%; */
	max-width: 898px;
	padding: 0px 0px 0px 0px;
}
#bildm {
	max-width: 620px;
	margin:  0px auto 0px auto;
}
#bildm figure {
	font-style: italic;
	font-size: 1em;
	border: thin #8EAD97 solid;
	margin: 0px 11% 10px 11%;
	padding: 14px 10px 6px 10px;
}
.detailNav {
	width: 100%;
}
.detailNav a {color: black;}
/* .detailNav p {} */
.detailText {
	font-size: 1.0em;
	background-color: inherit;
  	margin: 0px auto 0px auto;
	padding: 10px 15px 10px 15px;
}
#ulr {
	max-width: 420px;
	margin: 0px auto 6px auto;
	padding-left: 20px;
	padding-top: 0px;
}
#ulr li {text-align: left; margin-top: 0px; padding-top:0px;}
.lilt {list-style-type: circle;}

#container, #container2, #container3, #container4{
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
}
#container2, #container3, #container4{
	margin: 10px auto 0px auto;
}
#container {
	max-width: 898px;
	margin: 3px auto 5px auto;
}
#container img {height: 144px; width: 192px;}
#container figure {
  max-width: 200px;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin #8EAD97 solid;
  margin: 0.5em;
  padding: 0.5em;
}
#container figcaption {}
#container2, #container3, #container4 {
	max-width: 1052px;
  	padding: 0px 10px 10px 10px;	
}
#container2 img {
	height: 144px;
	width: 144px;
	object-fit: cover;
}
.flex-item2 {
	width: 144px;
	height: 144px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}
#container3 img {
	background-color: white;
	border-radius: 10px;
}
.flex-item3 {
	width: 325px;
	height: 140px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}
#container4{
	text-align: center;
	-webkit-justify-content: left;
	justify-content: left;	
}
#container4 img {
	height: 32px;
	width: 32px;
}
#container4 p {
	font-size: 10pt;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 10px 0px;	
}
.flex-item4 {
	width: 74px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}
.archiv {
	min-height: 240px;
	height: auto;
	margin: 0px auto 0px auto;
	padding: 0px 14px 0px 14px;	
}
.archiv p{
	font-size: 1.0em;
	text-align: left;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#fp {display: inline-block;}
#pano {
	margin: 5px auto 10px auto;
	width: 640px;
	height: 360px;
}
#kokt {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
}
#kokt button {
	padding: 0px 3px 0px 3px;
	background-color: transparent;
	border: none;
	text-decoration: none;
	cursor: pointer;
}
#kokt ul {
	padding: 0;
	margin: 0;
}
#kokt ul li {
	display: inline-block;
	list-style: none;
	padding: 4px 3px;
}
dialog {
	display: none;
	position: absolute;
	top: 50%;
	margin-top: -10em;
	left: 50%;
	margin-left: -12em;
	width: 22em;
	background: #C0D1C5;
	border: 1px solid grey;
	border-radius: 0.5em;
	z-index: 1002;
	padding: .5em 1em;
	height: auto;
}
dialog[open="open"] {
	display: block;
}
/* @media (min-width: 30em) {
	dialog {
		position: absolute;
		top: 50%;
		margin-top: -10em;
		left: 50%;
		margin-left: -10em;
		width: 22em;
	}
} */
dialog::backdrop,
#backdrop {
	/* Ebene zwischen Hintergrund und Dialog-Box, Pseudoelement noch nicht implementiert */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}
dialog #close-dialog {
	position: absolute;
	right: 0;
	top: 0;
	height: 23px;
	padding: 0px 3px 0px 3px;
	cursor: pointer;
	background-color: #c32e04;
	color: white;
	font: bold 1em sans-serif;
	border-radius: 0px 5px 0px 0px;
}
#navtm {
	max-width: 850px;
	margin: 0px auto;
	padding: 5px 5px 0px 5px;
}
#navtm ul {
	text-align: left;
	margin: 0px;
	padding: 0px 0px 0px 5px;
}
#navtm ul li {
	display: inline-block;
	padding: 3px 5px 3px 5px;
}
#navtm ul li:hover {
	background-color: #ddd;
	border-radius: 4px;
}
#navtm a {
	text-decoration: none;
	color: inherit;
}
#navtm p {
	font-size: 1.1em;
	margin:  5px 15px 0px 5px;
	padding: 0;
}
form h3 {
	font-size: 1.1em;
	padding: 0px 3px 5px 3px;
}
fieldset {
	border: none;
	padding-top: 5px;
}
legend {
	width: 100%;
	padding: 0px 0px 5px 0px;
	border-bottom: 1px #8EAD97 solid;
}
input {
	width: 64%;
	font-size: 0.9em;
	font-family: Verdana, Sans-Serif;
	margin: 0px 0px 5px 3px;
	padding: 4px;
	background-color: #fffbf0;
	border: 1px solid #8EAD97;
}
/* Formular-Termine */
#openModal label::after, #oMmod2 label::after {
	content: ": ";
}
input[type="submit"],
input[type="reset"] {
   width: auto;
   height: 1.8em;
   vertical-align: middle;
   padding: 0px 5px 0px 5px;
   font-weight: 500;
   letter-spacing: 0.1em;
   color: teal;
   border-radius: 5px;
   cursor: pointer;
}
input[type="date"], input[type="time"] {
	width: 40%;
}
input[name="tdel"] {
	margin-top: 5px;
	margin-bottom: 0px;
}
input[type="radio"] {
	width: 15px;
	margin: 5px;
	background-color: transparent;
}
#openModal form, #oMdel form, #oMmod2 form {
	font-size: 0.9em;
	text-align: left;
}
#openModal form, #oMmod2 form {
	overflow-y: auto;
	max-height: 400px;
}
#oMdelL {
	max-height: 374px;
	overflow-y: auto;
}
#openModal input[type="submit"], #oMmod2 input[type="submit"] {
	margin-left: 17px;
	margin-right: 10px;
}
#openModal label, #oMmod2 label {
	display: inline-block;
	text-align: right;
	line-height: 1.5em;
	width: 29%;
}
#openModal form ul, #oMmod2 form ul {
	display: inline-block;
	padding: 0px 0px 2px 0px;
}
#openModal form ul li, #oMmod2 form ul li {
	display: inline-block;
	padding: 0px 0px 0px 0px;
}
#openModal form ul li label, #oMmod2 form ul li label {
	width: auto;
}
#openModal form ul li label::after, #oMmod2 form ul li label::after, #oMdel label::after {
	content: "";
/*	display: block; */
}
#oMdel label {
	display: inline-block;
	width: 90%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	height: 22px;
	vertical-align: middle;
}
/* Termin-Liste-modifizieren #oMmod - Ändern #oMmod2 */
#tlmod {
	font-size: 1em;
	text-align: left;
	max-height: 332px;
	overflow-y: auto;
	margin: 5px;
}
#oMmod h3 {
	font-size: 1.0em;
	text-align: left;
	display: inherit;
	padding: 0px 0px 2px 3px;
}
#tlmod ul {padding: 0; margin: 0;}
#tlmod ul li {
	display: inline-block;
	width: 100%;
	line-height: 120%;
}
#tlmod ul li a, #tlmod ul li a:active, #tlmod ul li a:hover {
	text-decoration: none;
}
#tlmod ul li a {
	display: inherit;
	width: 100%;
	color: black;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#tlmod ul li a:visited {color: dimgrey;}
#tlmod ul li a:active {color: #96513D;}
#tlmod ul li a:hover {color: #C05B39;}
/* Ende Formular-Termine */
/* Fenster Neuer Termin/Löschen/Ändern */
.modalDialog {
 position: Fixed;
 font-family: Verdana, Sans-Serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.6);
 z-index: 99999;
 opacity: 0;
 transition: opacity 400ms ease-in;
 overflow-y: auto;
 pointer-events: None;
}
.modalDialog:target {
 opacity: 1;
 pointer-events: Auto;
}
.modalDialog > div {
 width: 400px;
 position: relative;
 margin: 154px Auto 0px auto;
 padding: 10px;
 border-radius: 10px;
 /* background-color: #c0d1c5;
 background: linear-gradient(#8ead97, #c0d1c5); */
 background: linear-gradient(#BFBFBF, #E0E0E0);
 cursor: Default;
}
.modalDialog h3 {
	font-size: 1.1em;
	padding: 3px 5px;
	margin: 0;
}
.modalDialog p {
	font-size: 1em;
	padding: 3px 5px;
	margin: 0;
}
.datumzeit {
	color: #696969;
}
.datumzeit:hover {
	color: black;
}
.close {
 background-color: #606061;
 color: #FFFFFF;
 line-height: 25px;
 position: Absolute;
 right: -12px;
 text-align: Center;
 top: -10px;
 width: 24px;
 text-decoration: None;
 font-weight: Bold;
 border-radius: 12px;
 box-shadow: 1px 1px 3px #000000;
}
.close:hover {
 background-color: #c32e04;
}
@media all and (max-width: 31em) {
  /* Too narrow to support three columns */
body {
	display: block;
}
header, main, footer {border: none;}
header {
	padding-top: 5px;
	/* height: 55px; */
}
header h1 {
	font-size: 1.2em;
}
.imgkorb, .imgrab {
	width: auto;
	/*height: 80%; */
}
#page1 img {
width: 94%;
height: auto;
}
nav {padding: 10px 0px 0px 8px;}
nav img {float: left;}
nav ul li {
	display: inline-block;
	width: 136px;
	padding: 0;
	margin: 3px 5px 8px 10px;
}
/*nav ul li ul {top: 195px;}
nav ul li:hover > ul {max-height: 5em;} */
nav ul li ul li {display: block;}
#pano {width: auto;}

article p {font-size: 1em;}

tr, th, td, #tbjp td.tdb {
	display: block;
	text-align: left;
}
td {border-left: 1px #8EAD97 solid;}
tr {padding-bottom: 10px;}
.modalDialog > div {width: 240px;}
dialog {
	width: 20em;
	top: 90%;
	left: 0;
	margin: 0 auto;
}
#bildm figure img {
	width: 98%;
	height: auto;
}
}
/* @media all and (max-width: 28em) {} */