@charset "UTF-8";
body  { font-family: Arial, Helvetica, Calibri, sans-serif;
        font-size: 18px;
        margin: 0em 2em 2em 0em;
        padding: 0;
        border: 0;
/*       overflow: hidden;  */
        height: 100%;
        max-height: 100%;
        background-color:#FCFCFC 
      }
a:visited  { color:#0000BB; }
a:link     { color:#0000FF; }
a:hover    { color:#FF0000; text-decoration:none; background-color:#CAEEFE; }
a:active   { color:#FF0000; text-decoration:none; background-color:#FCFCFC; }

        
div     { font-size: 1.4em; 
          margin-bottom:0.0em;
          margin-left: 0em;
        }
h1      { font-size: 3.0em;
          margin-bottom: 0.2em;
        }
h2      { font-size: 2.5em; 
          margin-top: 0em;
          margin-bottom: 0.5em;
          color:blue;
          letter-spacing: 2px;
        }

img     { margin-top: 0em; 
          float: left;
          margin-left: 1em;
          position: absolute;
        }
input   { font-size: 1.2em;
          color: blue;
        }

input[type="checkbox"] {
          width:  33px;
          height: 33px;
          background-color: #C0FF00; 
        }
lable   {
          vertical-align: middle;
        }
label.checkbox-label input[type=checkbox]
        {
          position: relative;
          vertical-align: middle;
          bottom: 1px;
        }
li      { font-size: 1.4em; 
          margin: 3em 3em; 
        }
p       { font-size: 1.5em;
          color: #00009F; 
          line-height: 100%; 
        }
td      { font-size: 1.6em;
          color: darkgreen;
        }
th      { font-size: 1.0em; 
          background-color: #E0F2F7;
        }
#tr     { background-color: #F0F0F0;
        }
#tdred  { background-color: #FFE2E2;
          font-size: 0.9em;
        }
#tdgreen{ background-color: #E2FFE2;
          font-size: 0.9em;
        }
.container {
          position: relative; /* Wichtig, damit das Bild absolut positioniert werden kann */
          width: 100%;
          height: 300px; /* Beispielhöhe für den Container */
          border: none;
        }

.centered-image {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin-left: -20px; /* Dies ist die Verschiebung nach links */
        }    
.scrollable-table-container {
          overflow-y: auto; /* Erlaubt vertikales Scrollen */
          max-height: 300px; /* Begrenzt die Höhe, um Scrollen zu ermöglichen */
        }

.sticky-header-table thead {
          position: sticky; /* Sichert die Position beim Scrollen */
          top: 0; /* Fixiert den Kopf oben am Fenster */
          background-color: white; /* Optional: Fügt einen weißen Hintergrund hinzu, um unsichtbare Daten zu vermeiden */
          z-index: 1; /* Stellt sicher, dass der Kopf über den anderen Elementen liegt */
}
.my1 {
         font-size: 0.8em;
         color: black;
         vertical-align: text-top;
        }
.my2 {
         font-size: 1.1em;
         color: black;
         vertical-align: text-top;
        }
      
.tabmin {
         font-size: 1.2em;
         color: black;
        }
.Zeile  {
         font-size: 0.9em;
        }
.Zelle0 {
         font-size: 0.0em;
         padding: 0px;
         color: #F0F0F0;
         white-space: nowrap;
         overflow: hidden;
        }

        
#butcol1 {
            color: red;
         }
#butcol2 {
            color: green;
         }
#butcol3 {
            color: black;
         }
/*  display: zuerst NICHT zeigen - sonst none; */
.hidden {
         display: none;
        }

.button {
/*  display: inline-block; */
  padding: 5px;
  font-size: 1.1em;
  cursor: pointer;
  text-align: center;
  width: 15em;
  text-decoration: none;
  outline: none;
  color: #505050;
  background-color: #DFDFDF;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 8px 8px 5px #999;
}
.button2 {
/*  display: inline-block; */
  padding: 5px;
  font-size: 1.1em;
  cursor: pointer;
  text-align: center;
  width: 15em;
  text-decoration: none;
  outline: none;
  color: #505050;
  background-color: #DFDFDF;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 8px 8px 5px #999;
}
.button3 {
/*  display: inline-block; */
  padding: 5px;
  font-size: 1.1em;
  cursor: pointer;
  text-align: center;
  width: 15em;
  text-decoration: none;
  outline: none;
  color: #505050;
  background-color: #DFDFDF;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 8px 8px 5px #999;
}

.button:hover {background-color: #FFE2E2}
.button2:hover {background-color: #E2FFE2}
.button3:hover {background-color: #E2E2FF}

.button:active {
  background-color: #6F6F6F;
  color: #fff;
  box-shadow: 0 0 0 #666;
  transform: translateY(8px) translateX(10px);
  
}
.inline-div {display: inline-block;
             margin-left: 0em;
            }
.input {background-color: #FFFFE0;
        margin-bottom:3px;}

.error {font-size: 1.6em;
        color: red;}
.links {font-size: 1.6em;
        color: black; 
        margin: 0.5em 4.5em;
        line-height: 100%; }
.innertube{
margin: 10px; /*Margins for inner DIV inside each DIV (to provide padding)*/
         }

#ul    { margin-left: 10%;
         font-size: 1.4em;}
#footer {
    position:absolute;
    bottom: 0;
    width: 100%;
    background-color: #F0F0F0;
    height: 2em;
}