/* ==========================================================================
   umweltdaten.css: Umweltdaten Flexmodul
   ========================================================================== */
   :root {
    --ui-border-radius: 5px;
    --padding-v: .5rem;
    --padding-h: .5rem;
    --sc-label-size: 0.8rem;
    --sc-label-padding-h: calc(var(--sc-label-size) * 1);
    --sc-label-padding-v: calc(var(--sc-label-size) * 0.125);
    }


.umweltdaten__container {
    border: 2px solid #ccc;
    border-radius: var(--ui-border-radius);
    margin: 0 0 1rem 0;
}

.umweltdaten__filter-area {
    background-color: #efefef;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
    box-shadow: 0 8px 5px 0px hsla(0, 0%, 0%, 0.3);
    margin: 0 0 0 0;
}

.umweltdaten__inputgroup {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem;
}

.umweltdaten__sub-heading {
    font-size: 1rem;
    font-weight: normal;
    width: 100%;
    margin: 0;
}

.umweltdaten__label {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 0.85rem;
    flex-grow: 1;
}

.umweltdaten__empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 0 0;
}

.umweltdaten__empty svg {
    fill: #ccc;
}

.umweltdaten__label .label__text {
    font-size: 0.85rem;
    color: #737373;
}

.umweltdaten__input /* TODO: zusammenführen mit Frontend SASS*/{
    border: 2px solid #ccc;
    border-radius: 0.25rem;
    color: #464646;
    background-color: #fff;
    padding: 0.25rem;
    height: 2rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.umweltdaten__input option {
    font-size: 0.85rem;
    color: #464646;
    background-color: #fff;
}

.umweltdaten__accordion {
    margin: 1rem;
    border-bottom: 2px solid #ccc;
    font-size: 0.875rem;
    padding: 0.25rem;
}

.umweltdaten__accordion.active {
    margin: 0;
    border-bottom: 2px solid #fff;
    padding: 1.25rem;
    box-shadow: inset 0 -8px 5px 0px hsla(0, 0%, 0%, 0.3);
}

.umweltdaten__accordion--box.active .js-accordion-toggle,
.umweltdaten__accordion.active .js-accordion-toggle {
    transform: scaleY(-1);
    transition: all 0.25s ease-in-out;
}

.umweltdaten__accordion--box .js-accordion-toggle,
.umweltdaten__accordion .js-accordion-toggle {
    transform: scaleY(1);
    transition: all 0.25s ease-in-out;
}

.umweltdaten__accordion-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    column-gap: 1rem;
}

.umweltdaten__accordion-heading > .layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 1rem;
    align-items: flex-start;
    justify-content: flex-start;
    width: 75%;
}

.umweltdaten__accordion-heading .measure-name {
    width: 60%;
}

.umweltdaten__accordion-heading .station-name {
    width: 100%;
    padding-left: 2.25rem;
}


/* ICONS AS BUTTONS */

.form__button--iconbutton {
    background: none;
    border: none;
    fill: var(--theme-bg-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 2rem;
    padding: 0;
}


.form__button--iconbutton .icon--grey:hover,
.form__button--iconbutton .icon:hover {
    fill: var(--theme-bg-highlight-hover);
}

.form__button--iconbutton .icon--grey {
    fill: #737373;
}


/* BASIC ICON */

.icon,
.icon--theme {
    fill: var(--theme-bg-highlight);
}

.icon--medium {
    height: 1.5rem;
    width: 1.5rem;
}

.icon--grey {
    fill: #737373;
}

.umweltdaten__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    font-size: 0.85rem;
}


/* ============================================
DATABOX
===============================================*/


.umweltdaten__databox {
    margin: 1rem 0 1rem 0;
    padding: 0.5rem;
    background-color: #efefef;
    font-size: 0.85rem;
}

.umweltdaten__databox h3 {
    border-bottom: 2px solid #ccc;
    font-weight: normal;
    font-size: 1rem;
    padding-bottom: 0.5rem;
}

.umweltdaten__databox p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin:  0 0 0.5rem 0;
    gap: 2rem;
}


.umweltdaten__databox p ~ h3{
   margin: 1rem 0 0.5rem 0;
}


/* ============================================
GEOKARTEN
===============================================*/

#map {
    margin-top: 10px;
    width: 100%;
    height: 400px;
}

#mainMap {
    padding: 0;
    margin: 0;
    height: 400px;
    width: 100%;
}


/* ============================================
ACCORDION BOX
===============================================*/

.umweltdaten__accordion--box {
    border: 2px solid #ccc;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin: 1rem 0;
}

.umweltdaten__accordion-heading h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: normal;
}

.umweltdaten__image {
    width: 100%;
    height: auto;
    margin: 0 1rem 1rem 0;
}

.umweltdaten__image--float-left {
    float: none;
}

.umweltdaten__accordion--box #map {
    border: 1px solid #ccc;
    margin: 1rem 0;
}

.umweltdaten__accordion--box h4 {
    font-size: 1rem;
    font-weight: normal;
}

.umweltdaten__accordion--box h5 {
    font-size: 0.85rem;
    font-weight: normal;
}

.umweltdaten-ls-main {
    margin: 1rem 0 0 0;
}

.umweltdaten__description li{
    margin-left: 1.5rem;
}

.umweltdaten__messwert-links {
    margin: 1rem 0;
    display: flex;
    gap: 1rem;
}

.umweltdaten__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    flex: 1;
    grid-column: 1;
}

.umweltdaten__messwert-links .umweltdaten__link {
    margin: 0;
}

/* ============================================
INFOGRAPHIC
===============================================*/

.nbg-infografik {
    background-color: #efefef;
    border-radius: 0.5rem;
    padding: 1rem 1rem 0.25rem 1rem;
}

.nbg-infografik--flex-tiles {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.nbg-infografik h2 {
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--theme-bg);
    width: 100%;
    margin: 0;
}

.nbg-infografik__element {
    border: 2px solid #fff;
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: space-evenly;
}

.nbg-infografik__element .icon {
    height: 2.5rem;
    width: 2.5rem;
    fill: var(--theme-bg-highlight);
    flex-shrink: 0;
    flex-grow: 0;
}

.nbg-infografik__data-value {
    font-size: 1.25rem;
    color: var(--theme-bg-highlight);
    white-space: nowrap;
}

.nbg-infografik__data-value--smaller {
    font-size: 1rem;
}

.nbg-infografik__header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1rem 0;
}

.nbg-infografik__footer {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin: 0;
}

.nbg-infografik__timestamp {
    text-align: right;
    font-size: 0.6rem;
}

/* Windrichtung Animation */

.windrose__graph-area {
    max-height: 6rem;
}

.windrose__map .icon {
    fill: #cccccc;
    width: 6rem;
    height: 6rem;
    position: relative;
    top: 0;
    left: 0;
}

.windrose__arrow .icon{
    width: 6rem;
    height: 6rem;
    fill: var(--theme-bg);
    position: relative;
    top: -6rem;
    left: 0;
    display: flex;
    transition: transform 1s ease-in-out;
    align-items: center;
    justify-content: center;
}


/* ============================================
UV-INDEX
===============================================*/

.uvindex__container {
    margin: 1rem 0;
    --uv-low: #67922C;
    --uv-medium: #F1D416;
    --uv-high:#ED900B ;
    --uv-veryhigh: #E4221F;
    --uv-extreme: #AB1982;
}

.uvindex__graph-area p {
    margin: 0 0 0.5rem 0;
}

.uv__wrapper {
    height: 9rem;
    overflow: hidden;
}

.uv__unit {
    height: 6rem;
    width: 6rem;
    border: 0.5rem solid var(--theme-bg);
    border-radius: 3rem;
    background-color: #fff;
    color: var(--theme-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    position: relative;
    top: -12rem;
    left: 0;
}

.uv__graph-outer {
    height: 6rem;
    width: 100%;
    border: 0.5rem solid var(--theme-bg);
    border-radius: 3rem;
    position: relative;
    top: -6rem;
    left: 0;
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 0.5rem 1.5rem 0.5rem 7rem;
}

.uv__graph-scale {
    width: calc(100% - 6rem - 1rem /* 1rem = both border */);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    top: -11rem;
    left: 6rem;
}

.uv__graph-scale .graph-scale__group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.uv__graph-scale .graph-scale__group:last-child {
    grid-template-columns: 2fr 3fr 2fr 3fr 2fr;
}

.uv__graph-scale .graph-scale__element--number {
    text-align: right;
    margin-right: -0.5ch;
}

.uv__graph-scale .graph-scale__element--number:nth-last-of-type(2) {
    margin-right: -1ch;
}

.uv__graph-scale .graph-scale__element--number:last-child {
    width: 200%;
}

.uv__graph-scale .graph-scale__element--text {
    text-align: center;
    position: relative;
    right: -2ch;
    display: none;
}

.uv__graph-inner {
    --uv-index-value: 0;
    --circle-size: 6rem;
    --border-width: 1rem;
    --offset: calc(var(--circle-size) + var(--border-width));

    height: var(--circle-size);
    width: calc(((100% - var(--offset)) / 12 * var(--uv-index-value)) + var(--offset));
    border: var(--border-width) solid #efefef;
    border-radius: 3rem;
    transition: width 1s ease-in-out;
}

.uv__graph-inner--gradient1 {
    background: linear-gradient(to right, var(--uv-low) 0%, var(--uv-low) 100%);
}

.uv__graph-inner--gradient2 {
    background: linear-gradient(to right, var(--uv-low) 0%, var(--uv-low) 90%, var(--uv-medium) 100%);
}

.uv__graph-inner--gradient3 {
    background: linear-gradient(to right, var(--uv-low) 0%, var(--uv-medium) 25%, var(--uv-medium) 100%);
}

.uv__graph-inner--gradient4 {
    background: linear-gradient(to right, var(--uv-low) 0%, var(--uv-medium) 20%, var(--uv-medium) 100%);
}

.uv__graph-inner--gradient5 {
    background: linear-gradient(to right, var(--uv-low) 0%, var(--uv-medium) 20%, var(--uv-medium) 90%, var(--uv-high) 100%);
}

.uv__graph-inner--gradient6 {
    background: linear-gradient(to right, var(--uv-medium) 0%, var(--uv-high) 25%, var(--uv-high) 100%);
}

.uv__graph-inner--gradient7 {
    background: linear-gradient(to right, var(--uv-medium) 0%, var(--uv-high) 20%, var(--uv-high) 95%, var(--uv-veryhigh) 100%);
}

.uv__graph-inner--gradient8 {
    background: linear-gradient(to right, var(--uv-medium) 0%, var(--uv-high) 20%, var(--uv-high) 90%, var(--uv-veryhigh) 100%);
}

.uv__graph-inner--gradient9 {
    background: linear-gradient(to right, var(--uv-high) 0%, var(--uv-veryhigh) 25%, var(--uv-veryhigh) 100%);
}

.uv__graph-inner--gradient10 {
    background: linear-gradient(to right, var(--uv-high) 0%, var(--uv-veryhigh) 20%, var(--uv-veryhigh) 90%, var(--uv-extreme) 100%);
}

.uv__graph-inner--gradient11 {
    background: linear-gradient(to right, var(--uv-veryhigh) 0%, var(--uv-extreme) 25%, var(--uv-extreme) 100%);
}


/* ============================================
OZON-TICKER
===============================================*/

.ozon__container {
    margin: 1rem 0;
    --ozon-normal: #67922C;
    --ozon-alert-1: #ED900B;
    --ozon-alert-2: #E4221F;
}

.ozon__graph-area {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.ozon__wrapper {
    max-height: 15rem;
    overflow: hidden;
    width: 100%;
}

.ozon__wrapper .nbg-infografik__footer {
    position: relative;
    top: -10.5rem;
}

.ozon__graph-outer {
    height: 6rem;
    width: 100%;
    border: 0.5rem solid var(--theme-bg);
    border-radius: 3rem;
    position: relative;
    top: -6rem;
    left: 0;
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 0.5rem 1.5rem 0.5rem 7rem;
}

.uv__graph-outer .nbg-infografik__data-value,
.ozon__graph-outer .nbg-infografik__data-value {
    background: hsla(0, 0%, 100%, 0.9);
    border-radius: 0.25rem;
    padding: 0.25rem;
}

.ozon__graph-inner {
    --circle-size: 6rem;
    --border-width: 1rem;
    --offset: calc(var(--circle-size) + var(--border-width));

    height: var(--circle-size);
    width: calc(((100% - var(--offset)) / 300 * var(--ozon-index-value)) + var(--offset));
    border: var(--border-width) solid #efefef;
    border-radius: 3rem;
    transition: width 1s ease-in-out;
}


.ozon__unit {
    height: 6rem;
    width: 6rem;
    border: 0.5rem solid var(--theme-bg);
    border-radius: 3rem;
    background-color: #fff;
    color: var(--theme-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    position: relative;
    top: -12rem;
    left: 0;
}

.ozon__unit sub {
    font-size: 1rem;
}

.ozon__graph-scale {
    width: calc(100% - 6rem - 1rem /* 1rem = both border */);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    top: -11rem;
    left: 6rem;
}

.ozon__graph-scale .graph-scale__group {
    flex-wrap: wrap;
    justify-content: space-evenly;
    display: grid;
    grid-template-columns: repeat(29, 1fr);
}

.ozon__graph-scale .graph-scale__group:last-child {
    grid-template-columns: 16fr 7fr 7fr;
}

.ozon__graph-scale .graph-scale__element--number {
    text-align: right;
    position: relative;
    left: -50%;
}

.ozon__graph-scale .graph-scale__element--number:nth-of-type(18),
.ozon__graph-scale .graph-scale__element--number:nth-of-type(24) {
    background: #efefef;
    z-index: 5;
}


.ozon__graph-scale .graph-scale__element--number:last-child {
    width: 100%;
}

.ozon__graph-scale .graph-scale__element--text {
    text-align: center;
    position: relative;
}

.ozon__graph-scale .graph-scale__element--text:not(:last-of-type)::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: calc(100% * 2.5);
    border-right: 1px dotted #ccc;
    right: 0;
    z-index: 0;
}

.ozon__graph-inner--fill-normal {
    background: var(--ozon-normal);
}

.ozon__graph-inner--fill-alert1 {
    background: var(--ozon-alert-1);
}

.ozon__graph-inner--fill-alert2 {
    background: var(--ozon-alert-2);
}


/* ============================================
LOADING SPINNER
===============================================*/
/* variant spinner within page element, taken from site\sass\backend_ui\_loading.scss */
/* TODO:  Remove as soon as there is a global loading animation via style.min.css available */

.loading-spinner {
    width: 100%;
    min-height: 100%;
    position: relative;
    top: 0;
    left:0;
}

.loading-spinner__bg {
    width: 100%;
    height: 100%;
    min-height: 36.875em;
    background-color: hsla( var(--color, 0, 0%), var(--l, 0%), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner__bg_tweak {
    min-height: 12em;
}

.loading-spinner__icon {
    animation: loading-spinner-animation 3s linear infinite;
}

.loading-spinner .loading-spinner__icon{
    fill: #fff;
    width: 3rem;
    height: 3rem;
    filter: drop-shadow(0px 0px 8px hsl( var(--color, 0, 0%), var(--l, 0%), 0.4));
}


/*Zusatzklasse für den Content, so dass er leicht verschwommen dargestellt wird. */
.content--blur {
    filter: blur(0.125rem);
}

body.custom_iframe_controller_is_sending #IMPERIA {
  filter: blur(2px);
}


/* Animation */

@keyframes loading-spinner-animation {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}


@media only all and (min-width: 36.875em) {

    .umweltdaten__inputgroup {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 1rem;
        justify-content: space-evenly;
        align-items: flex-end;
    }

    .umweltdaten__accordion-heading {
        align-items: center;
    }

    .umweltdaten__accordion-heading > .layout-wrapper {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .umweltdaten__accordion-heading .measure-name {
        width: 35%;
    }

    .umweltdaten__accordion-heading .station-name {
        width: 35%;
        padding-left: 0;
        hyphens: auto;
    }

    .uv__graph-scale .graph-scale__element--text {
        display: block;
    }

    .uv__graph-scale .graph-scale__element--text:not(:last-of-type)::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: calc(100% * 2);
        border-right: 1px dotted #ccc;
        right: 0;
    }

    .uv__wrapper {
        height: 11rem;
    }

}


@media only all and (min-width: 55em) {


    .ozon__wrapper {
        width: 66%;
    }

    .ozon__graph-area {
        gap: 1rem;
        flex-direction: row;
    }

    .ozon__wrapper:nth-of-type(2) {
        width: 33%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .dynamic-content--flex {
        display: flex;
        gap: 1rem;
        justify-content: flex-start;
    }

    .dynamic-content--flex > div {
        width: 50%;
    }

}