/* font */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(roboto400.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(roboto700.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* allgemein */
#coronabox-companion,
#coronabox-companion * {
  margin: 0;
  padding: 0;
  border: none;
  color: #474c59;
  font-family: "Roboto", Arial, sans-serif;
  box-sizing: border-box;
}
#coronabox-companion {
  min-width: 241px;
  overflow: hidden;
}
#coronabox-companion .value {
  padding: 0 0 0 10px;
}

/* layout */
#coronabox-companion #coronaboxInner-companion {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 2fr 1fr 1fr auto auto;
  grid-column-gap: 16px;
  background: #f7f9fc;
  border-radius: 8px;
  padding-right: 3px;
}
#coronabox-companion.showAdditionalInfo #coronaboxInner-companion {
  grid-template-rows: auto 2fr 1fr 1fr auto auto 1fr 1fr;
}
#coronabox-companion .grid1 {
  grid-area: 1 / 1 / 2 / 3;
}
#coronabox-companion .grid2 {
  grid-area: 2 / 1 / 5 / 2;
}
#coronabox-companion .grid3 {
  grid-area: 2 / 1 / 3 / 3;
}
#coronabox-companion .grid4 {
  grid-area: 3 / 1 / 4 / 3;
}
#coronabox-companion .grid5 {
  grid-area: 4 / 1 / 5 / 3;
}
#coronabox-companion .grid6 {
  grid-area: 5 / 1 / 6 / 3;
}
#coronabox-companion .grid7 {
  grid-area: 6 / 1 / 7 / 3;
}

#coronabox-companion .grid2,
#coronabox-companion .grid3,
#coronabox-companion .grid4,
#coronabox-companion .grid5 {
  position: relative;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  align-items: center;
}
#coronabox-companion .grid3 {
  align-items: flex-start;
  padding: 3px 12px 39px 0;
  display: block;
}
#coronabox-companion .map img {
  width: auto;
  height: 100%;
}
#coronabox-companion .grid3.neuinfektionen a {
  margin-left: -100px;
}
#coronabox-companion .label {
  display: block;
  font-size: 20px;
}
#coronabox-companion .grid3 .label {
  font-size: 14px;
  font-weight: 700;
  line-height: 120%;
}
#coronabox-companion .grid4 span.label,
#coronabox-companion .grid5 span.label {
  font-size: 12px;
  font-weight: 400;
  line-height: 120%;
  margin-left: 61px;
  margin-top: 4px;
}
#coronabox-companion .grid5 span.label {
  margin-top: 0;
}
#coronabox-companion .grid3 hr,
#coronabox-companion .grid6 hr {
  height: 1px;
  background-color: #ebeff7;
  position: relative;
  bottom: 0;
}
#coronabox-companion .grid3 hr {
  min-width: 100%;
  bottom: -38px;
  left: 0;
}
#coronabox-companion .grid6 hr {
  bottom: -16px;
  width: 100%;
}
#coronabox-companion .value {
  position: absolute;
  right: 16px;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
}
#coronabox-companion .value a {
  text-decoration: none;
}
#coronabox-companion .value.engcor-trendDown,
#coronabox-companion .value.engcor-trendUp {
  right: 41px;
  top: 14px;
}
#coronabox-companion .grid3 .value {
  top: 36px;
  font-size: 23px;
  line-height: 28px;
}
#coronabox-companion .grid3 .value * {
  color: #e20074;
}
#coronabox-companion .grid4 .value * {
  color: #1bada2;
}
#coronabox-companion .grid5 .value * {
  color: #53baf2;
}
.neuinfektionen__graph {
  width: 100%;
  height: auto;
}
#coronabox-companion .value.engcor-trendDown::after,
#coronabox-companion .value.engcor-trendUp::after,
#coronabox-companion .engcor-button::after,
#coronabox-companion .additionalInfoHeader a::after {
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  top: 6px;
  right: -20px;
}
#coronabox-companion .grid5.hasGraph {
  margin-top: -7px;
}
#coronabox-companion .value.engcor-trendDown::after,
#coronabox-companion .value.engcor-trendUp::after {
  width: 11px;
  height: 11px;
  top: 9px;
  right: -15px;
}
#coronabox-companion .grid3 .value a {
  margin-left: 5px;
}
#coronabox-companion .grid3 .value::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC42MzAzMTkgNy4xMjg5NUw2Ljk4ODI4IDAuNTIzMzkyTTYuOTg4MjggMC41MjMzOTJMMC45NjQ5NDggMC41MjMzOTJNNi45ODgyOCAwLjUyMzM5Mkw2Ljk4ODI4IDYuNzgxMjkiIHN0cm9rZT0iI0UyMDA3NCIvPgo8L3N2Zz4K");
  width: 13px;
  height: 13px;
  top: 7px;
}
#coronabox-companion .grid4 .value::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMS4xMzAzMiA3LjEyODk1TDcuNDg4MjkgMC41MjMzOTJNNy40ODgyOSAwLjUyMzM5MkwxLjQ2NDk1IDAuNTIzMzkyTTcuNDg4MjkgMC41MjMzOTJMNy40ODgyOSA2Ljc4MTI5IiBzdHJva2U9IiMxQkFEQTIiLz4KPC9zdmc+Cg==");
  width: 8px;
  height: 8px;
  top: 4px;
}
#coronabox-companion .grid5 .value::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC41OTgxODggNy4xMjg5NUw2Ljk3OCAwLjUyMzM5Mk02Ljk3OCAwLjUyMzM5MkwwLjkzMzk2NyAwLjUyMzM5Mk02Ljk3OCAwLjUyMzM5Mkw2Ljk3OCA2Ljc4MTI5IiBzdHJva2U9IiM1M0JBRjIiLz4KPC9zdmc+Cg==");
  width: 8px;
  height: 8px;
  top: 4px;
}
#coronabox-companion .value.engcor-trendDown::after {
  transform: rotate(90deg);
}
#coronabox-companion .additionalInfoHeader {
  color: #e20074;
  font-weight: 700;
  font-size: 14px;
}
#coronabox-companion .additionalInfoHeader:hover {
  color: #171b26;
}
#coronabox-companion .additionalInfoHeader a {
  color: #e20074;
  position: relative;
  text-decoration: none;
}
#coronabox-companion .additionalInfoHeader:hover a {
  color: #171b26;
}
#coronabox-companion .additionalInfoHeader a::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuNSA4LjVIMTUuNSIgc3Ryb2tlPSIjRTIwMDc0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTAuNSAzLjVMMTUuNSA4LjVMMTAuNSAxMy41IiBzdHJva2U9IiMxNzFCMjYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
  width: 15px;
  height: 15px;
  top: 0;
  right: -32px;
}
.neuinfektionen__graph-container {
  width: 80px;
  bottom: 13px;
  position: absolute;
}
#coronabox-companion .graph-container {
  position: absolute;
  height: 100%;
  width: 57px;
  left: -8px;
  top: 0;
  display: flex;
  justify-content: center;
}
#coronabox-companion .disclaimer {
  font-size: 8px;
  line-height: 9.6px;
  font-weight: 400;
  color: #8d93a6;
  padding: 0 12px 16px 0;
  margin-top: -5px;
  text-align: left;
}
#coronabox-companion .additionalInfoHeader {
  font-size: 14px;
  padding: 16px 12px 0 0;
}
#coronabox-companion .engcor-button.akt {
  display: none;
}

/* desktop */
@media screen and (min-width: 768px) {
  #coronabox-companion {
    width: 100%;
  }
  #coronabox-companion #coronaboxInner-companion {
    max-width: 241px;
    grid-template-rows: auto 2fr 1fr 1fr auto auto;
  }
  #coronabox-companion .engcor-button.akt {
    display: none;
  }
}

@media screen and (min-width: 200px) {
  #coronabox-companion .grid6,
  #coronabox-companion .grid3 {
    padding-right: 0;
  }
  #coronabox-companion .value.engcor-trendDown,
  #coronabox-companion .value.engcor-trendUp {
    right: 15px;
  }
  #coronabox-companion .additionalInfoHeader {
    position: relative;
  }
  #coronabox-companion .additionalInfoHeader a {
    position: static;
  }
  #coronabox-companion .additionalInfoHeader a::after {
    top: 16px;
    right: 0;
  }
  #coronabox-companion .grid4 .value::after,
  #coronabox-companion .grid5 .value::after {
    right: -12px;
  }
  #coronabox-companion .grid3 .label {
    font-size: 18px;
  }
  #coronabox-companion,
  #coronabox-companion * {
    color: #171b26;
  }
}

/* darkmode */
@media (prefers-color-scheme: dark) {
  #coronabox-companion .additionalInfoHeader a {
    position: static;
  }
  #coronabox-companion .additionalInfoHeader:hover a {
    color: #F7F9FC;
  }
  #coronabox-companion .additionalInfoHeader {
    position: relative;
  }
  body,#coronabox-companion #coronaboxInner-companion {
    background: #171b26;
  }
  #coronabox-companion,
  #coronabox-companion * {
    color: #a3aabf;
  }
  #coronabox-companion .grid3 .label {
    color: #f7f9fc;
  }
  #coronabox-companion .additionalInfoHeader * {
    color: #e20074;
  }
  #coronabox-companion .grid3 hr, #coronabox-companion .grid6 hr {
    background-color: #262C3B;
  }
  #coronabox-companion .additionalInfoHeader a::after {
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuNSA4SDE1LjUiIHN0cm9rZT0iI0UyMDA3NCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEwLjUgM0wxNS41IDhMMTAuNSAxMyIgc3Ryb2tlPSIjRjdGOUZDIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
    width: 16px;
    height: 16px;
    top: 16px;
    right: 0;  
  }
}
@media screen and (min-width: 200px) and (max-width: 300px) {
  #coronabox-companion #coronaboxInner-companion {
    padding-right: 0;
  }

}