p, body { font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size:11pt; margin:10px; color:#D0D0D0; }
body {background-color:#C0C0C0; }

ul { font-size:11pt; }
p.Titel { font-size:22pt; font-weight:bold; color: #953535; text-align: center; text-shadow: 3px 3px 6px #606060; }

article { color:#000000; }
article > p { color:#000000; }

h1 { color:#c90000; font-size:16pt; clear:both; margin: 80px 30px 30px 50px; width: 80%; }
h2 { color:#c90000; font-size:14pt; clear:both; margin: 25px 0 20px 20px; width: 80%; }
h3 { color:#c90000; font-size:13pt; clear:both; margin: 25px 0 20px 20px; width: 80%; }
h4 { color:#c90000; font-size:12pt; clear:both; margin: 25px 0 20px 10px; width: 80%; }
h5 { color:#c90000; font-size:12pt; clear:both; margin: 25px 0 20px 10px; width: 80%; }
h6 { color:#c90000; font-size:12pt; clear:both; margin: 25px 0 20px 10px; width: 80%; }

h1.chronik  { font-size:13pt; clear: left; padding: 30px 10px 10px 10px; width: 70%; min-width: 300px; max-width: 500px; margin: 0 auto; text-align: center; }
h2.chronik  { font-size:12pt; clear: left; padding: 20px 10px 10px 10px; width: 70%; min-width: 300px; max-width: 500px; margin: 0 auto; text-align: center; }

h1.neu { position: static; left: 0px; margin-top: 70px; height: 100%; padding: 0px; font-size:15pt; width: 100%; }
h2.neu { position: static; left: 0px; margin-top: 50px; height: 100%; padding: 0px; font-size:13pt; width: 100%; }
p.neu { text-align: justify; margin-top: 0px; }

p.chrunten { width: 80%; min-width: 300px; max-width: 500px; margin: 0 auto; }

table.chr { border: 0px solid gray; min-width: 200px; max-width: 700px; margin: 20px auto 20px auto; }

tr {background-color:#F0F0F0; }
tr:nth-child(even) {background-color:#E0E0E0; }
td:nth-child(1) {width: 100px; padding: 5px; vertical-align: top; border: 0px solid gray; }
td:nth-child(2) {padding: 5px; vertical-align: middle; border: 0px solid gray; }

p.hioben { font-size:13pt; font-weight: bold; clear: left; padding: 10px; }

#hiunten { font-size:9pt; }

p.link { background: #E0E0E0; display: block; float: left; padding: 0 7px 0 7px; }


/* Smartphone */
/* Inhalt - Bilder, Text neben Bild */

#wrap {
 margin: 0 auto;  /* Zentriert das Layout */
 width: 100%;  /* Definiert die maximale Gesamtbreite des Layouts */
}

.bili {width: 100%; margin: 20px auto 10px auto; }
.tere {width: 95%; margin: 10px auto 50px auto; }

.teli {width: 95%; margin: 10px auto 50px auto; }
.bire {width: 100%; margin: 20px auto 10px auto; }

/* Text unter linkes Bild */
.teunli {width: 95%; clear:both; margin: -50px 2.5% 50px 2.5% }
/* Text unter rechtes Bild */
.teunre {width: 95%; clear:both; margin: -50px 2.5% 50px 2.5% }

/* Text ohne Bild */
.te {width: 95%; clear: both; margin: 0px auto 50px auto; }

/* Bild ohne Text */
.bi {width: 100%; clear: both; margin: 30px auto 30px auto; }

/* Text zweispaltig */
.te2li {width: 90%; text-align: justify; margin: 30px auto 40px auto; clear: both; }
.te2re {width: 90%; text-align: justify; margin: 30px auto 40px auto; }

/* ENDE */ 


/* Bilder und Beschriftung, weißer Rahmen */
figure {
  position: relative;
  margin: 0;
  padding: 10px; /* Breite v weißen Rahmen um das Bild */
  border: 1px solid gainsboro; /* zusätzlicher grauer Rand */
  background: white;
}
 
figcaption {padding: 10px; text-align: center; }
/* ENDE */


a:link {color:#955555; font-weight: bold;}
a:visited {color:#955555; }
a:active {color:#A55555; }
a:hover {color:#000000; }
a {text-decoration:none; }
/* ENDE*/


/* Button nach oben */
.naob {width:20%; clear:both; float:right; margin:50px 5px 50px 5px; }
/* Footer Menue */
.footer {clear:both; margin: 20px; }

.footer ul {list-style: none; margin: 20px; }

.footer ul li { 
  float: right; 
  display: inline; 
  border-left: 2px solid #A0A0A0;
  border-right: 2px solid #A0A0A0;
  padding: 5px 7px 5px 7px;
  margin: 0 0 30px 0;
}

.footer a:link {color:#FFFFFF; font-weight: normal; background: #A56565; padding: 5px 7px 5px 7px; }
.footer a:visited {color:#FFFFFF; }
.footer a:active {color:#FFFFFF; }
.footer a:hover {background:#C56565; color:#000000; }


/* MENUE */
nav a:link {color:#FFFFFF; font-weight: normal; background: }
nav a:visited {color:#FFFFFF; }
nav a:active {color:#FFFFFF; }
nav a:hover {background:#C56565; color:#000000; }

nav ul { list-style: none; margin: 0; padding: 0; }

nav > ul > li { 
  float: left;
  border-left: 2px solid #A0A0A0;
  border-right: 2px solid #A0A0A0;
  padding: 5px 7px 5px 7px;
}

nav ul li:hover {background: #C56565; color:#000000; }

.aktiv1 { color: #000000; }
.aktiv2 { color: #000000; background: #A56565; padding:7px 5px 5px 5px; border-bottom: 2px solid #A0A0A0; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); }
.haupt { color: #FFFFFF; }

nav > ul > li > ul { display: none; }
nav > ul a { display: block; white-space: nowrap; background: #A56565; }

nav ul > li > ul > li a {
  background: #A56565;
  color: #FFFFFF;
  padding:7px 5px 5px 5px;
  border-bottom: 2px solid #A0A0A0;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
}

nav ul > li > ul > li a:hover { position: relative; left: 15px; }

nav > ul {
  float: left;
  overflow: hidden;
  padding: 10px 15px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
  background: #A56565;
}

nav > ul > li:hover > ul { display: block; position: absolute; }
nav > ul > li > ul > li { position: relative; left: 25px; top: 12; float: none; z-index: 99; }
nav > ul > li > ul > li > ul { display: none; }
nav > ul > li > ul > li:hover > ul { display: block; position: absolute; left: 50%; top: 20; }
nav > ul > li > ul > li > ul > li { position: relative;  top: 12; float: none; z-index: 100; }
.clear {clear: both; }

.aktiv1:hover {background: #A56565; }


/* MEDIA QUERIES */

/* Desktop */
/* Inhalt - Bilder, Text neben Bild */

@media only screen and (min-width: 768px){
#wrap {max-width: 1200px; }

.bili {width: 75%; float:left; margin: 10px 0px 50px 0px; }
.tere {width: 22%; clear:none; float:right; margin: 10px 0px; }

.teli {width: 22%; float:left; margin: 10px 0px; text-align:right; }
.bire {width: 75%; clear:none; float:right; margin: 10px 0px 50px 0px; }

/* Text unter linkes Bild */
.teunli {width: 75%; float: left; margin: -50px 0px 50px 0px; }
/* Text unter rechtes Bild */
.teunre {width: 75%; float: right; margin: -50px 0px 50px 0px; }

/* nur Text */
.te {width: 80%; clear: both; margin: 10px auto 50px auto; text-align: justify; }
/* Bild ohne Text */
.bi {width: 90%; clear: both; margin: 50px auto 50px auto; }


/* Text zweispaltig */
.te2li {width: 40%; text-align: justify; margin: 3% 1% 3% 8%; clear: both; float: left;}
.te2re {width: 40%; text-align: justify; margin: 3% 8% 3% 1%; float: right; }

}
/* ENDE */ 



/* MENUE */
/* Smartphone u Tablet */ 
@media all and (max-width:768px) {

h1 {margin: 0px 0px 10px 0px; width: 100%; }

nav ul li {} 
nav ul li:hover {}
nav ul li a {padding: 10px 10px; }
.aktiv1 {padding: 15px 20px; }
.haupt {padding: 15px 15px 15px 15px; }

nav ul li ul li { }
nav ul li ul li a {padding: 15px 10px; background: #E56565;}
nav ul > li > ul > li a:hover { position: relative; left: 0px; }
nav > ul > li > ul > li { position: relative; left: 0px; top: 12; float: none; z-index: 99; }

}