@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@font-face .lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

@font-face .lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

@font-face .lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@font-face .lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

@font-face .lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

@font-face .lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

@font-face .lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

@font-face .lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

@font-face .lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

@font-face .lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

body {
	color: white;
	font-family: 'Lato', sans-serif;
	font-size: 17px;
}

a {color: #2f3a59; text-decoration: none;}
a:hover, a:visited, a:link, a:active {color: #2f3a59; text-decoration: underline;}
a:page-link {color: #2f3a59; text-decoration: none;}
p {font-weight: 300;}
ul {font-weight: 300; color: black;}
img {border: 1px solid black;}
h3 {font-size: 20px; color: #2f3a59;}
table, tbody, tr, td {
  color: black;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 17px;
}
table.rounded {
  border-collapse: collapse;
  border-radius: 16px;
  border-style: hidden;
  box-shadow: 0 0 0 1px #000;
}
.toggle-input {
  display: none;
}
a.numberCircle {
  display: flex;
  width: 3ch;
  align-items: center;  
  justify-content: center;
  aspect-ratio: 1 / 1;
  font-size: 16px;
  border-radius: 50%;  
  border: 2px solid #000;
  text-decoration: none;
  cursor: pointer;
  color: #000;
  background-color: #fff;
  transition: all 0.3s ease;
}
a.numberCircle:hover {
  color: #fff;
  background-color: #000;
  border: 2px solid #000;
  text-decoration: none;
}
a.kunstmenu {
  display: flex;
  align-items: center;  
  justify-content: center;
  font-size: 20px; 
  border-bottom: 6px solid #888;
  text-decoration: none;
  cursor: pointer;
  color: #555;
  transition: all 0.3s ease;
}
a.kunstmenu:hover {
  color: #000;
  border-bottom: 6px solid #000;
  text-decoration: none;
}
.toggle-input:checked + .numberCircle {
  color: #fff;
  background-color: #000;
  border: 2px solid #000;
  text-decoration: none;
}
.toggle-input:checked + .kunstmenu {
  color: #000;
  border-bottom: 6px solid red;
  text-decoration: none;
}