@charset "utf-8"; /* charset festlegen */
/* ************************************************ */
/* DATEI: gdnrw_GRID_tabelle.css                    */
/* Tabellen-Style für barierefreie Tabellen         */
/* ************************************************ */
/* "#" -> "id"-Selektor; "." -> "class"-Selektor    */
/* top, right, bottom, left                         */
/* ************************************************ */

/* ------------------------------------------------ */
/* --- Bereich Artikel - im Bereich Mitte --------- */
/* ------------------------------------------------ */


/* --- tabelle allgemein --- */
table {
  font-size: 1em;
  width: 790px; /* 99% */
  margin: 0px auto;
  line-height: 1.3em;
  border-spacing:0pt;
  border:1px solid #999999;
  margin: 10px 10px 10px 16px;
}

/* --- th allgemein --- */
th {
  height: 1.5em;
  padding: 3px 8px 2px 8px;
}

/* --- td allgemein --- */
td {
  height: 1.3em;
  padding: 3px 8px 2px 8px;
}

/* --- oberste Überschrift --- */
caption {
  font-size: 1.4em;
  font-weight: bold;
  width: 80%;
  /* background-color: #CCCCCC; */
  margin: 8px 0px 8px 0px;
  padding-left:8px;
  line-height: 1.3em;
  letter-spacing: 2pt;
  text-align: left;
}

/* --- th - Zusammenfassung der linken Spalte --- */
#zusammen {
  height: 1.5em;
  background-color: #CCCCCC;
  text-align: right;
  padding-right: 8px;
  border-bottom: 1px solid #999999;
}

/* --- th - Zusammenfassung der rechten Spalte --- */
#ueber {
  height: 1.5em;
  background-color: #CCCCCC;
  text-align: left;
  padding-left:10px;
  border-bottom: 1px solid #999999;
  border-left:1px solid #999999;
}

/* --- unterschiedliche Farbgestaltung der Tabellenzeilen --- */
/*
tr:nth-child(even) {
  background-color: #FFFFFF;
  height: 1.1em;
  padding: 3px 8px 3px 8px;
  border: 1px solid #98BF21;
  color: #404040;
}

tr:nth-child(odd) {
  background-color: #EAF2D3;
  height: 1.1em;
  padding: 3px 8px 3px 8px;
  border: 1px solid #98BF21;
  color: #000000;
} 
*/

/* --- allgemeine Definitionen zur 1. Spalte --- */
th.spalte_1,
th.spalte_2,
th.spalte_3,
th.spalte_4,
th.spalte_5 {
  background-color: #CCCCCC;
  border-left:1px solid #999999;
}

/* --- allgemeine Definitionen zur 1. Spalte --- */
td.spalte_1 {
  background-color: #DDDDDD;
}

/* --- allgemeine Definitionen ab 2. Spalte --- */
td.spalte_2,
td.spalte_3,
td.spalte_4,
td.spalte_5,
td.spalte_2_d {
  background-color: #F5F5F5;
  border-left:1px solid #999999;
}

/* --- tr_1 - nur die erste Zeile mit der Überschrift - Definitionen zur 1. Spalte --- */
.tr_1 .spalte_1 {
  text-align: right;
  border-top: 1px solid #999999;
}
/* --- tr_1 - nur die erste Zeile mit der Überschrift - Definitionen ab 2. Spalte --- */
.tr_1 .spalte_2,
.tr_1 .spalte_3,
.tr_1 .spalte_4,
.tr_1 .spalte_5 {
  text-align: left;
  border-top: 1px solid #999999;
}

/* --- tr_2 - alle anderen Zeilen - Definitionen zur 1. Spalte --- */
.tbody_1 .tr_2 .spalte_1 {
  text-align: right;
  border-top: 1px solid #999999;
}

/* --- tr_2 - alle anderen Zeilen - Definitionen ab 2. Spalte --- */
.tbody_1 .tr_2 .spalte_2,
.tbody_1 .tr_2 .spalte_3,
.tbody_1 .tr_2 .spalte_4,
.tbody_1 .tr_2 .spalte_5 {
  text-align: left;
  border-top: 1px solid #999999;
}

/* --- tr_2 - alle anderen Zeilen - Definitionen zur 2. Spalte  gestrichelte Linie --- */
.tbody_1 .tr_2 .spalte_2_d {
  text-align: left;
  border-top: 1px dashed #999999;
}


/* ----------------------------------------------------------- */
/* -- tabelle_eas_responsive --------------------------------- */
/* ----------------------------------------------------------- */

.tabelle_eas_responsive {
  /*
  display: block;
  word-wrap: break-word;
  */
  display: inline-block;
  width: auto;
  height: auto;
}

.tabelle_eas_responsive * {
  width: auto;
  height: auto;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-word;
  /*
  white-space: pre-line;
  */
  overflow-wrap: break-word;
  -ms-word-break: break-word;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.tabelle_eas_responsive table {
  width: auto;
  border-collapse: collapse;
  margin: 0px auto;
  margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
  border-spacing: 0pt;
  border: 1px solid #999999;
  /*
  width: 100%;
  margin: 0px auto;
  line-height: 1.1em;
  */
}

/* --- th allgemein --- */
.tabelle_eas_responsive tr th {
  border-collapse: collapse;
  text-align: left;
  vertical-align: top;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  color: #000000;
  background-color: #EAF2D3;
  border: 1px solid #98BF21;
  /*
  background-color: #DDDDDD;
  border: 1px solid #999999;
  */
}

/* --- td allgemein --- */
.tabelle_eas_responsive tr.ungerade td {
  border-collapse: collapse;
  text-align: left;
  vertical-align: top;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  color: #404040;
  background-color: #FFFFFF;
  border: 1px solid #98BF21;
  /*
  border: 1px solid #999999;
  */
}

/* --- td allgemein --- */
.tabelle_eas_responsive tr.gerade td {
  border-collapse: collapse;
  text-align: left;
  vertical-align: top;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  color: #000000;
  background-color: #EAF2D3;
  border: 1px solid #98BF21;
  /*
  background-color: #DDDDDD;
  border: 1px solid #999999;
  */
}


/* ----------------------------------------------------------- */
/* -- tabelle_einfach_responsive ----------------------------- */
/* ----------------------------------------------------------- */

.tabelle_einfach_responsive {
  /*
  display: block;
  word-wrap: break-word;
  */
  display: inline-block;
  width: auto;
  height: auto;
}

.tabelle_einfach_responsive * {
  width: auto;
  height: auto;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-line;
  /*
  */
  overflow-wrap: break-word;
  -ms-word-break: break-word;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.tabelle_einfach_responsive table {
  width: auto;
  border-collapse: collapse;
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
  border-spacing: 0pt;
  border: 1px solid #999999;
  /*
  width: 100%;
  margin: 0px auto;
  line-height: 1.1em;
  */
}

/* --- th allgemein --- */
.tabelle_einfach_responsive tr th {
  border-collapse: collapse;
  text-align: left;
  vertical-align: top;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  color: #000000;
  background-color: #DDDDDD;
  border: 1px solid #999999;
}

/* --- td allgemein --- */
.tabelle_einfach_responsive tr.ungerade td {
  border-collapse: collapse;
  text-align: left;
  vertical-align: top;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  color: #404040;
  background-color: #FFFFFF;
  border: 1px solid #999999;
}

/* --- td allgemein --- */
.tabelle_einfach_responsive tr.gerade td {
  border-collapse: collapse;
  text-align: left;
  vertical-align: top;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  color: #000000;
  background-color: #DDDDDD;
  border: 1px solid #999999;
}



/* ----------------------------------------------------------- */
/* ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ */
/* ----------------------------------------------------------- */
/* -- Tabelle Bodenfeuchte Berichte responsive --------------- */
/* ----------------------------------------------------------- */

.bodenfeuchte_berichte {
  hyphens: auto;
  margin: 4px 4px 4px 4px;
}

.bodenfeuchte_berichte table {
  width: 100%;
  table-layout: fixed;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border: none;
  border-collapse: collapse;
  margin: 30px 0px 0px 0px;
  /*
  background-color: rgba(204, 204, 204, 0.8);
  border: 1px solid #FF0000;
  */
  
}

.bodenfeuchte_berichte table caption {
  /*
  */
  font-size: 1.3em;
  font-weight: bold;
  width: 100%;
  margin: 20px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
}

.bodenfeuchte_berichte table tr {
  /*
  border: 1px solid blue;
  background-color: rgba(204, 204, 204, 0.8);
  */
}

/* --- Text fett --- */
.bodenfeuchte_berichte .fett {
  font-weight: bold;
}


.bodenfeuchte_berichte table th {
  color: #FF6633;
  text-align: center;
  border: 1px solid #EEEEEE;
  background-color: #CCCCCC;
  /*
  border: 3px solid red;
  */
}

.bodenfeuchte_berichte table td {
  text-align: center;
  border: 1px solid #CCCCCC;
  /*
  border: 1px solid red;
  background-color: rgba(204, 204, 204, 0.8);
  */
}


.bodenfeuchte_berichte tr:nth-child(even) {
  background-color: #EEEEEE;
  /*
  height: 1.1em;
  padding: 3px 8px 3px 8px;
  border: 1px solid #98BF21;
  color: #404040;
  */
}

.bodenfeuchte_berichte tr:nth-child(odd) {
  background-color: #FFFFFF;
  /*
  height: 1.1em;
  padding: 3px 8px 3px 8px;
  border: 1px solid #98BF21;
  color: #000000;
  */
}

.bodenfeuchte_berichte img {
  width: 100%;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  max-width: 900px;
  /*
  object-fit: cover;
  */
}

/* ----------------------------------------------------------- */

@media screen and (max-width: 600px) {
  .bodenfeuchte_berichte table {
    /*
    border: 0;
    */
  }

  .bodenfeuchte_berichte table caption {
    /*
    font-size: 1.3em;
    */
  }
  
  .bodenfeuchte_berichte table thead {
    /*
    */
    position: absolute;
    width: 1px;
    height: 1px;
    border: none;
    clip: rect(0 0 0 0);
    overflow: hidden;
    /*
    margin: -1px;
    padding: 0;
    */
  }
  
  .bodenfeuchte_berichte table tr {
    display: block;
    margin: 20px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    /*
    border: 1px solid blue;
    background-color: rgba(204, 204, 204, 0.8);
    */
  }
  
  .bodenfeuchte_berichte table td {
    display: block;
    text-align: right;
    margin: 5px 0px 5px 0px;
    padding: 5px 10px 15px 5px;
    border: none;
    border-bottom: 1px solid #CCCCCC;
    height: fit-content;
    /*
    border: 1px solid red;
    */
  }
  
  .bodenfeuchte_berichte table td::before {
    color: #FF6633;
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 40px;
    text-align: left;
    /*
    background-color: rgba(0, 204, 204, 0.8);
    vertical-align: top;
    padding-right: 40px;
    line-height: ;
    max-width:180px;
    max-width:200px;
    text-transform: uppercase;
    */
    /*
    * aria-label has no advantage, it won't be read inside a table
    */
  }
  
  /*  <span class="umbruch_davor"></span> */
  .bodenfeuchte_berichte .umbruch_davor::before {
      content: "\A";
      white-space: pre;
  }
  
  .bodenfeuchte_berichte table td:last-child {
    /*
    border-bottom: 0;
    */
  }
}
/* ----------------------------------------------------------- */
/* ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ */
/* ----------------------------------------------------------- */














/* ----------------------------------------------------------- */
/*  weitere Möglichkeit der unterschiedlichen Zeilengestaltung */
/* ----------------------------------------------------------- */
/*
.tabelle_eas tr:nth-child(even) {
  background-color: #FFFFFF;
  height: 1.1em;
  padding: 3px 8px 3px 8px;
  border: 1px solid #98BF21;
  color: #404040;
}

.tabelle_eas tr:nth-child(odd) {
  background-color: #EAF2D3;
  height: 1.1em;
  padding: 3px 8px 3px 8px;
  border: 1px solid #98BF21;
  color: #000000;
} 
*/



/* ----------------------------------------------------------- */
/* ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT */
/* ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ */
/* ----------------------------------------------------------- */


/* ------------------------------------------------ */
/* -- tabelle_eas --------------------------------- */
/* ------------------------------------------------ */

.tabelle_eas table {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.9em;
  width: auto;
  margin: 0px auto;
  line-height: 1.1em;
  border-spacing:0pt;
  border-collapse: collapse;
  border:1px solid #999999;
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
}

/* --- th allgemein --- */
.tabelle_eas tr th {
  background-color: #EAF2D3;
  height: 1.1em;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  border: 1px solid #98BF21;
  color: #000000;
}

/* --- td allgemein --- */
.tabelle_eas tr.ungerade td {
  background-color: #FFFFFF;
  height: 1.1em;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  border: 1px solid #98BF21;
  color: #404040;
}

/* --- td allgemein --- */
.tabelle_eas tr.gerade td {
  background-color: #EAF2D3;
  height: 1.1em;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  border: 1px solid #98BF21;
  color: #000000;
}

/* ------------------------------------------------ */
/* -- tabelle_einfach ----------------------------- */
/* ------------------------------------------------ */

.tabelle_einfach table {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.9em;
  width: auto;
  margin: 0px auto;
  line-height: 1.1em;
  border-spacing:0pt;
  border-collapse: collapse;
  border:1px solid #999999;
  margin: 10px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
}

/* --- th allgemein --- */
.tabelle_einfach tr th {
  background-color: #DDDDDD;
  height: 1.1em;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  border:1px solid #999999;
  color: #000000;
}

/* --- td allgemein --- */
.tabelle_einfach tr.ungerade td {
  background-color: #FFFFFF;
  height: 1.1em;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  border:1px solid #999999;
  color: #404040;
}

/* --- td allgemein --- */
.tabelle_einfach tr.gerade td {
  background-color: #DDDDDD;
  height: 1.1em;
  margin: 0px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  border:1px solid #999999;
  color: #000000;
}

/* ----------------------------------------------------------- */
/* ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ */
/* ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT ALT */
/* ----------------------------------------------------------- */


/* ----------------------------------------------------------- */
/* TEST - Tabellen responsive (Handy)                          */
/* ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ */
/* ----------------------------------------------------------- */
/*
@media screen and (max-width: 768px) {

  .tabelle_einfach_responsive tr {
    border-bottom: none;
  }
  
  .tabelle_einfach_responsive td {
    border: 1px solid #999999;
    padding: 0px 0px 0px 0px;
    border: 1px solid #999999;
  }
  
  .tabelle_einfach_responsive table {
    border: none;
  }
  
  .tabelle_einfach_responsive thead,
  .tabelle_einfach_responsive th {
    display: none;
  }
  
  .tabelle_einfach_responsive tr {
    float: left;
    width: 100%;
    margin-bottom: 2em;
  }
  
  .tabelle_einfach_responsive tr.ungerade td,
  .tabelle_einfach_responsive tr.gerade td {
    background-color: #FFFFFF;
  }
  
  .tabelle_einfach_responsive td {
    float: left;
    width: 100%;
    padding: 1em !important;
  }
  
  .tabelle_einfach_responsive td::before {
    content: attr(data-label);
    width: 25%;
    height: 100%;
    float: left;
    font-weight: bold;
    background-color: #DDDDDD;
    border-right: 1px solid #999999;
    margin: 0px 0px 0px 0px;
    padding: 4px 4px 4px 4px;
  }
}
*/
/* ----------------------------------------------------------- */
/* ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ */
/* TEST - Tabellen responsive (Handy)                          */
/* ----------------------------------------------------------- */