* {
  padding           : 0;
  margin            : 0;
}

body {
  /* siehe: https://www.mediaevent.de/css/css-vereinfachen.html         */
  font              : normal 2vw/2.2vw 'Verdana', 'Helvetica', sans-serif; 
  color             : darkslategray;
  background        : rgba(255, 255, 245); 
}

/* Tabelle allgemein ------------------------------------- */
table {
  width             : 100vw;
  border            : 0.05vw solid #f5f5f5;
  border-collapse   : collapse;
  empty-cells       : hide;
}

/* --- Tabellenkopf -------------------------- */
#tabKopf {
  width             : 100vw;
  /*position          : fixed; /* Tabellenkopf festsetzen ohne Resize */
  position          : sticky;  /* Tabellenkopf festsetzen mit  Resize */
  top               : 0;
  left              : 0;
  z-index           : 999;
}

#tabKopf td{  
  border-right: 0.01vw solid whitesmoke;
  text-align: right;
}

  /* --- Tabellenkopf - Zeile1 ----------------- */
#tabKopf .z1 td {
  background        : linear-gradient(#ee9, #efc);
  text-align        : center;
  border-right      : 0.01vw dotted #666;
}

#tabKopf ul {
  margin            : 0;
  list-style        : none; 
}

#tabKopf li{
  display           : inline-block;
  background        : rgba(150, 200, 150, 0.5);
  border-radius     : 0.5vw; /* ol, or, ur, ul */
  padding           : 0 1.5vw 0 1.0vw;
}

#tabKopf li.active {
  background        : #bcb01f; 
}

a {
  font-size         : 3vw;
  color             : #bcb01f;
  text-decoration   : none;
  text-shadow       : 0.1vw 0.1vw 0.1vw darkgreen;
}

a:hover {
  color             : #8f8;
}

#tabKopf li.active a {
  color             : #8f8;
}


  /* --- Tabellenkopf - Zeile2 ----------------- */
#tabKopf .z2 td {
  background        : linear-gradient(#efc, #ee9);
  width             : 10.5vw;
  text-align        : right;
  padding-right     : 1.5vw
}

#tabKopf .z2 td:first-child {
  width             : 12vw;
  text-align        : center;
}

#tabKopf .z2 td:nth-child(2) {
  width             : 11vw;
  text-align        : center;
  border-right      : 0.01vw dotted #666;
}

#tabKopf .z2 td:nth-child(4) {
  width             : 6vw;
  font-size         : 1.3vw;
  color             : darkgrey;
}

#tabKopf .z2 td:nth-child(6) {
  border-right      : 0.01vw dotted #666;
}


/* --- Tabelle Werte ------------------------- */
#werte td {
  width             : 10.5vw;
  text-align        : right;
  padding-right     : 1.5vw;
  border-radius     : 0.5vw 0.5vw 0 0;
  box-shadow        : inset 1px 3px 5px -3px rgba(,0,0,0.5);
  background 		: linear-gradient(white, #eed); /**/
}
#werte td:first-child {
  width             : 12vw;
  text-align        : center;
  padding-right     : 1vw
}

#werte td:nth-child(2) {
  width             : 11vw;
  text-align        : center;
  border-right      : 0.01vw dotted #666;
}

#werte td:nth-child(4) {
  width             : 6vw;
  font-size         : 1.4vw;
  color             : #666;
  text-shadow       : 0.1vw 0.1vw 0.1vw white; 
}

#werte td:nth-child(6) {
  border-right      : 0.01vw dotted #666;
}

.newhr {
  background        : #EFEFFF
}

#werte tbody tr:hover td{
  background        : linear-gradient(#ee9, #efc, #ee9 );
}

  /* Temperatur höher als (Klassennummer mal 5) °C */
#werte td.temperColor-4 { background: linear-gradient(#a500fc, #f5f5f5); color:#fff; }
#werte td.temperColor-3 { background: linear-gradient(#7d50e3, #f5f5f5); color:#fff; }
#werte td.temperColor-2 { background: linear-gradient(#2a88e5, #f5f5f5); color:#fff; }
#werte td.temperColor-1 { background: linear-gradient(#2ac8e5, #f5f5f5); color:#fff; }
#werte td.temperColor0  { background: linear-gradient(#2ae5b3, #f5f5f5); }
#werte td.temperColor1  { background: linear-gradient(#abe52a, #f5f5f5); }
#werte td.temperColor2  { background: linear-gradient(#d4ea2b, #f5f5f5); }
#werte td.temperColor3  { background: linear-gradient(#f4d807, #f5f5f5); }
#werte td.temperColor4  { background: linear-gradient(#efb415, #f5f5f5); }
#werte td.temperColor5  { background: linear-gradient(#fc9100, #f5f5f5); }
#werte td.temperColor6  { background: linear-gradient(#e65745, #f5f5f5); }
#werte td.temperColor7  { background: linear-gradient(#d82727, #f5f5f5); }
#werte td.temperColor8  { background: linear-gradient(#fc0091, #f5f5f5); }