@import url(tabellen-spalten.css);     /* @import url(tabellen-spalten.css);   */
@import url(navigation-menue.css);     /* @import url(navigation-menue.css); */
body, table {                          /*formatierung für ganze seite;*/
  color: #0000CD;                      /*blue;*/
  font-size: 1em;
  background-color: #00BFFF;           /*#ADD8E6;*/ /*background-image: url(../mar1.jpg);*/
  background-size: cover;              /*background-color: #4169E1; /*#87CEFA;*/
  background-size: 200%;
  background-position: center;
  background-attachment: fixed;
  position: relative;                  /*relative; absolute; static; sticky; fixed;*/
  line-height: 1.0;                    /*abstand nach innen*/
  margin: 0px 0px 0px 0px ;
  padding: 0px 0px 0px 0px ;
  border: 3px solid #00BFFF;
  border-bottom-left-radius: 10px;     /*Ecken abrunden*/
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.zentrierte-tabelle {
    width: 700px;
    text-align: left;
    margin-left: auto; margin-right: auto;
}


.zentrierte-tabelle450 {
    width: 450px;
    text-align: left;
    margin-left: auto; margin-right: auto;
}


body1 {
vertical-align:middle;
}

body1.deinetabelle {
margin-top:auto;
margin-bottom:auto;
}


#inhalt {
  margin-left: 200px;                  /*abstand rechts*/
  margin-right:100px;
  padding: 0px 0px 0px 0px ;
    

body {
font-family: Times, serif; 
font-size: 110%;
line-height: 1.5;
}


.show, .hide {
padding:2px;
background: blue;
box-shadow:none!important;
color:white;
font-weight:bold;
}

.show:hover, .hide:hover {
background: #00BFFF;
color:blue;
transition:0.2s all ease-in-out!important;
}

img {
  max-width: 100%;
  height: auto;
}                                        /* scaliert alle Bilder
{
h1, h2, h3, h4, h5, .h1, .h1l {		     /*schriftauswahl für überschriften*/
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
div#wrapper {
  background-color: blue;
  color: black;
}
header#kopfbereich {
  background-color: #87CEFA;
  color: black;
}
h1 {                                       /*formatierung überschrift 1 */
  font-size: 110%;
  text-align: center;
  font-weight: 100;
  line-height: 1.0em;
}
h2 {
  font-size: 110%;
  color: black;
  table-layout: inherit;
  text-align: center;
  font-weight: 100;
}
h3 {
  font-size: 110%;
  table-layout: inherit;
  text-align: center;
  font-weight: 100;
}
h4 {
  font-size: 100%;
  background-color: #9cF;
  text-align: center;
}
h5 {
  font-size: 90%;
  text-align: center
}
a:link {
  color: #0000CD;
} /*font-weight:bold;*/ /* wie sollen normale Links aussehen? */
a.speziell:link {
  color: Black;
}
a:visited {
  color: #4682B4;
}
a:hover, a:focus { /*background-color: yellow;*/ /*font-weight: bold;*/ /*font-style:italic;*/
  color: black; /*#FF4500;*/
  /*; #00BFFF;*/
  text-decoration: underline;
}
a {
  text-decoration: none; /*text-decoration: underline;*/
}

p {
  margin-bottom: 20px;
}
.txtcenter {
  table-layout: inherit;
  /*font-family: sans-serif;*/
  text-align: center;
}
.txtleft {
  table-layout: inherit;
  text-align: left;
}
.txtright {
  table-layout: inherit;
  text-align: right;
}
.justify {
  text-align: justify;
}
.start {
  text-align: start;
}
.end {
  text-align: end;
}
.centerlinie {
  border: 3px medium dashed white;
}
th, td { /*Tabellenrahmen*/
  margin-left: auto;
  margin-right: auto;
  position: relative;
  /*font-size: 16px;*/
  border-radius: 1px;
  border: 1px medium dashed gray; /*Kurzschreibweise border: green 5px solid; (width-style-color)*/
  /*border-collapse: separate;*/
  border-spacing: 3px 3px;
  background-color: #00FFFF;
  padding: 1px;
}

/*Schatten der Überschriften*/
.shadow2 {
  text-shadow: 1px 10px 5px #191970;
  font-size: 20px;
  color: #0000CD;
  font-weight: thin;
  text-align: center;
}
.shadow3 {
  text-shadow: 50px 50px 50px #191970;
  /*2px 1px 0px #ccc;*/
  font-size: 20px;
  font-weight: 100;
  text-align: center;
  color: black;
}
.gelb001 {
  background-color: #FFFFE0;
}
.gelb002 {
  background-color: #FFFACD;
}
.gelb003 {
  background-color: #FFEFD5;
}
.gelb004 {
  background-color: #FFE4B5;
}
.gelb005 {
  background-color: #EEE8AA;
}
rand01 td, th {
  color: #0000FF;
  border: 1px ridge Lightblue;
}
/* Linkuntersreichung aus*/
a {
  text-decoration: none;
}
head:first-child + body thead[class].fixedHeader tr {
  display: block;
}
head:first-child + body tbody[class].scrollContent {
  display: block; /*block;*/
  height: 570px;
  overflow: auto;
}
head:first-child + body thead[class].fixedHeader tr {
  width: 788px; /*205*/
}
#container {
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 20px 10px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 20px 10px;
  background: #6495ED;
  /*background: url(../image/home/mar1.jpg) fixed;*/ /*kurz aus backgroud image: und background-attachment: fixed;*/
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 20px 10px;
  margin: 0 auto;
  border-radius: 15px;
  padding: 10px;
  width: 1000px;
}
/*Responsiv*/
/*Der nächste Code-Schnipsel ist banal, aber wirkungsvoll. Mit ihm skaliert ihr alle Bilder auf die jeweilige Breite des Displays und bewirkt die typische großflächige “Mobile-Optik”.*/
img {
  max-width: 100%;
  height: auto;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
  /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
  /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}
summary::-webkit-details-marker {
  display: none
}
summary:after {
  content: "+";
  margin-right: 5px;
}
details[open] summary:after {
  content: "-";
}
@media only screen and (min-width: 320px) {
  // Ihr Code für schmalere Smartphones, wie z.B. das Iphone
}
@media only screen and (min-width: 480px) {
  // Ihr Code für breitere Smartphones
}
@media only screen and (min-width: 768px) {
  // Ihr Code für Tablets
}
@media only screen and (min-width: 1280px) {
  // Ihr Code für die Desktop-Version
}
img {
  max-width: 100%;
  height: auto;
}