/* 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;
}
#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;
}
#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: -12px;
    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: #171b26;
    font-weight: 700;
    font-size: 14px;
}
#coronabox-companion .additionalInfoHeader a {
    position: relative;
    text-decoration: none;
}
#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 12px 0;
    margin-top: -5px;
    text-align: left;
}
#coronabox-companion .additionalInfoHeader {
    font-size: 14px;
    padding: 12px 12px 12px 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}
}