@import url('Schriftarten-Farben-Inhalte.css');





* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

*::before, *::after {
  box-sizing: border-box;
}





body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 10px;
}

@media (max-width: 896px) {
  body {
    flex-direction: column;
    gap: 8px;
  }
}





body > #Randbereich {
  padding: 6px 6px 16px 6px;
  width: clamp(192px, 22%, 229px);
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px;
  align-items: center;
}

@media (max-width: 896px) {
  body > #Randbereich {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 6px;
  }
}





body > #Inhaltsbereich {
  width: clamp(674px, 77%, 799px);
  padding: 6px;
  align-self: stretch;
}

@media (max-width: 896px) {
  body > #Inhaltsbereich {
    width: 100%;
    align-self: center;
  }
}





#Randbereich > #Titelbild {
  width: 100%;
}

@media (max-width: 896px) {
  #Randbereich > #Titelbild {
    width: 48px;
    height: 48px;
  }
}





#Randbereich > #Infobereich {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
}

@media (max-width: 896px) {
  #Randbereich > #Infobereich {
    flex-direction: row;
    flex-wrap: wrap;
  }
}





#Infobereich > div {
  margin: 2px 0px;
  width: 100%;
  text-align: center;
}

@media (max-width: 896px) {
  #Infobereich > div {
    margin: 0px 6px;
    display: inline-flex;
    width: auto;
  }
}





#Infobereich > #HellDunkel {
  margin: 14px 0px 0px 0px;
}

@media (max-width: 896px) {
  #Infobereich > #HellDunkel {
    margin: 6px 12px;
  }
}