/*  */
*{
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.Seite {
  height: 100vh;
  display: grid;
  place-items: center;
  background-image:  linear-gradient(#f5b2dc hsl(327, 89%, 39%));
  background-position:center;
  background-size: 100% 100%;
 background-repeat:no-repeat;

}


.topline {
  display: flex;
  justify-content: center;
  align-items: center;
  color: purple;
  text-shadow: 2px 2px  rgb(146, 145, 147);
}

table.content {
  background-image: url(img/ParadiesvogelLogo300px.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% 50%;
  border-collapse: collapse;
  margin: px 32px 0;
  font-size: 0.9em;
  min-width: 400px;
  border: 6px dotted;
  color: purple;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}

table.content thead tr {
  background-color: rgba(208, 21, 241, 0.286);
  color: purple;
  text-align: left;
  font-weight: bold;
  text-align: left;
   
}

table
.content th,
.content td {
  padding: 12px 16px;
  color: black;
  
}
table.content tbody tr {
  border-bottom: 1px solid rgb(44, 40, 44);
  background: rgba(247, 242, 247, 0.819);
}

table.content tr:last-of-type {
  border-bottom: 2px solid rebeccapurple;
}
table.content tr:hover {
  background: rgba(180, 71, 231, 0.54);
}

table.content tr.active:hover {
  background: rgba(180, 71, 231, 0.54);
}



.content-table tr:nth-child(even) {
  border: solid rebeccapurple;
}

.button {
  background-image: linear-gradient(#fff hsl(327, 89%, 39%));
  background-color: #3498;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 5px black;
  border-radius: 50%;
  box-shadow: inset 0px 0px 10px grey;
}
.card-button {
  display: inline-block;
  padding: 25px 25px 25px 25px;
  background-color: #3498;
  text-decoration: none;
  margin-top: 15px;
  color: #fff;
}

table.content tbody tr.active{
  border-color: rgb(90, 96, 31);
  border: 2px solid;
  font-weight: bold;
  color: rgb(85, 32, 85);
  background-color: rgba(252, 188, 242, 0.447)
  ;
}


/*Variante responsive C*/
@media screen and (max-width: 578px){
  table.content thead{
    display:none;
  }
  table.content tbody tr{
    display: block;
    margin-bottom: 20px;
    
  }
  table.content tbody tr:last-of-type{
    border-bottom: 1px solid paleturquoise;
  }
    table.content tbody td{
      display: block;
    }
    table.content tbody td::before {
      content: attr(data-label);
      display: inline-block;
      min-width: 200px;
    }
}