/* *******************************************************************
    Style-Sheet Veranstaltungskalender remso.de, remso.eu, remso.org
    remso.de/css/responsible_table.css
    Karl-Heinz Osmer, Groß-Gerau 2020
    Stand: August 2020
    https://codepen.io/gunnarbittersmann/pen/BmjPGr
   ******************************************************************* */


* { box-sizing: border-box }

[role="region"]
{
  overflow: auto;
}

.responsible table
{
  border-collapse: collapse;
  line-height: 1
}

.responsible caption, .responsible th, .responsible td
{
  padding: 0.25rem 0.5rem;	
}

.responsible caption
{
  font-size: 1.25em;
}

.responsible th, .responsible td
{
  width: 6em;
  border: thin solid silver;
  text-align: right;
  vertical-align: bottom;
}

.responsible td
{
  white-space: nowrap;
}

.responsible caption, .responsible th:first-child
{
  text-align: left;
}

.responsible table [hidden]
{
  display: inline;
  visibility: hidden;
}

.responsible sub
{
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(0.25em);
}

@media (max-width: 43em)
{
  @supports(--colheader: '')
  {
    .responsible table, .responsible caption, .responsible tbody, .responsible tr, .responsible th, .responsible td
    {
      display: block;
    }

    .responsible thead
    {
      display: none;
    }

    .responsible tr:not(:first-of-type)
    {
      margin-top: 1.5em;
    }

    .responsible th, .responsible td
    {
      width: auto;
      border: none;
      text-align: left;
    }

    .responsible td:nth-of-type(1) { --colheader: var(--colheader1) }
    .responsible td:nth-of-type(2) { --colheader: var(--colheader2) }
    .responsible td:nth-of-type(3) { --colheader: var(--colheader3) }

    .responsible td::before
    {
      content: var(--colheader) ": ";
      white-space: normal;
    }
  }
  
  .responsible table [hidden]
  {
    display: none;
  }
}