/*


h1 {
  color: var(--akzentfarbe);
}
Schwarz: #050609
Rot: #3C0000
Weiß: #F9E3DC

https://coolors.co/f4e8c1-a0c1b9-70a0af-706993-331e38

*/
/*
:root {
    --hintergrund: #F4E8C1;
    --accent: #A0C1B9;
    --text: #331E38;
    --link: #706993;
}

https://coolors.co/1d2c35-fbe1b1-f9cb8b-d5520b
*/

:root {
    --hintergrund: #FBE1B1;
    --accent: #C8C5BC;
    --accent2: #B6B2A5;
    --text: #1D2C35;
    --link: #D5520B;
}


body {
    background-color: var(--hintergrund);
    color: var(--text);
    /*font-family: "Open Sans", sans-serif;*/
    font-family: "Times New Roman", Times, serif;
    line-height: 1.25;
}

a, .click2 {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    background-color: var(--accent);
}

li, li a {
    padding: 5px;
}

table {
    border: 0px;
    margin-right: auto;
    margin-left: auto;
    border-collapse:collapse;

    margin: auto;
    padding: 0;
    /*width: 100%;*/
    table-layout: fixed;
}

table th {
    vertical-align: bottom;
    text-align: left;
    padding: 5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

table td {
    padding: 5px;
}

table td.rechts {
    text-align: right;
}

table th.rechts {
    text-align: right;
}

th.btt {
    width: 20px;
    text-align: left;
}

table tr {
    padding: .35em;
}

table tr.preSelected {
    background-color: var(--accent2);
}

table tr.mouseover:hover{
    background-color: var(--accent);
}

table tr.mouseover:hover td.click {
    color: var(--link);
}

table caption {
    caption-side: top;
    font-size: 1.5em;
    margin: .5em 0 .75em;
}

table tbody {
    /*border: 1px solid var(--hintergrund);
    border-radius: 100px;*/
    background-color: var(--hintergrund);
}

table td.click, table td.click2 {
    cursor: pointer;
}


.click:hover, .click2:hover {
    text-decoration: underline;
}



.punkte {
    width: 20px;
    text-align: center;
    white-space: nowrap;
}

.nowrap {
    white-space: nowrap;
}

.small {
    width: 40px;
    white-space: nowrap;
}



 

  
  @media screen and (max-width: 600px) {
    table {
      border: 0;
      width: 100%;
    }
  
    table caption {
      font-size: 1.3em;
    }
    
    table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    
    table tr {
      border-bottom: 3px solid var(--text);
      display: block;
      margin-bottom: .625em;
    }
    
    table td {
      /*border-bottom: 1px solid var(--text);*/
      display: block;
      font-size: 1em;
      text-align: right;
      width: 100%;
      overflow: auto;
    }

    .small {
        width: 100%;
    }
    .punkte {
        width: 100%;
        text-align: right;
    }
    
    table td::before {
      /*
      * aria-label has no advantage, it won't be read inside a table
      content: attr(aria-label);
      */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }
    
    table td:last-child {
      border-bottom: 0;
    }
  }