/* language visibility */

.DE.unset, 
.DE.block{
  display: none;
}

:root[lang="de"] .DE.block{
  display: block;
}
:root[lang="de"] .DE.unset{
  display: unset;
}
:root[lang="de"] .EN.unset,
:root[lang="de"] .EN.block{
  display: none;
}

.visually-hidden{
  position: absolute;
  left: -9999px;
}

/* switch */

fieldset.switch>div{
  padding: 0;
  display: inline-flex;
  border: solid var(--button-border-width) var(--border-color);
}

fieldset.switch>div:hover,
fieldset.switch>div:focus-within{
  box-shadow: var(--focus-box-shadow);
}

fieldset.switch>div>label{
  padding: 0.5em;
  display: inline-block;
}

fieldset.switch>div>input[type="radio"]{
  position: absolute;
  left: -9999px;
}

/* active */
fieldset.switch>div>input[type="radio"]:checked+label {
  color: var(--background-color);
  background-color: var(--text-color);
  box-shadow: inset 0 0 0 2px var(--background-color);
}

/* some styling */

:root {
  --text-color:black;
  --border-color: var(--text-color);
  --background-color: white;
  --button-border-width: 0.15rem;
  --focus-color: red;
  --focus-box-shadow: 2px 2px var(--focus-color);
}