/* Infografiken-Übersicht ------------------ */

#infografiken-cat-selection {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    display: flow-root;
}

#infografiken-cat-selection li {
    display: block;
    float: left;
    margin: 0 .5rem 1rem 0;
}

#infografiken-cat-selection li a {
    display: block;
    background-color: #E3DDC9;
    font-weight: 500;
    text-transform: uppercase;
    color: #79756B;
    padding: .25rem 1rem;
    transition: background-color .2s, color .2s, opacity .2s;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    line-height: 1.74;
    opacity: .8;
}

#infografiken-cat-selection li a:hover {
    opacity: 1;
}

#infografiken-cat-selection li.current a, #infografiken-cat-selection li.current a:hover {
    background-color: #CCC4AD;
    color: #101010;
    font-weight: 600;
    opacity: 1;
}

#infografiken-list {
    margin: 0;
}

#infografiken-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

#infografiken-list li {
    margin: 0;
    padding: 0;
    display: block;
    aspect-ratio: 2 / 1;
    position: relative;
}

#infografiken-list a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#infografiken-list .pic {
    display: block;
    aspect-ratio: 2 / 1;
    width: 100%;
    height: 100%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform .3s;
    filter: grayscale(1) brightness(1.5) contrast(80%);
}

#infografiken-list a:hover .pic {
    transform: scale(1.05);
}

#infografiken-list .grad {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255,255,255,0) 50%, rgba(212,206,188,0.3) 100%);
}

#infografiken-list .name {
    position: absolute;
    left: 0;
    right: 0;
    height: auto;
    bottom: 0;
    padding: .3rem 1rem .5rem;
    background-color: rgba(150, 168, 156, .85);
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.74;
    color: #101010;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(2px);
}

@media only screen and (min-width: 700px) {

    #infografiken-list ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (min-width: 1019px) {

    #infografiken-list ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #infografiken-list li:first-child {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        aspect-ratio: auto;
    }
}


/* Infografik ------------------ */

#infografik {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #fff;
}

#infografik .imagearea {
    min-width: 100%;
    overflow: hidden;
    aspect-ratio: 2 / 1;
}

#infografik .image {
    aspect-ratio: 2 / 1;
    width: 100%;
    background-color: transparent;
    position: relative;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: auto;
}

#infografik .image .hotspot {
    cursor: pointer;
    position: absolute;
    width: 40px;
    height: 40px;
    transform: translate(-50%,-50%) scaleX(1);
    padding: 0;
    background-color: transparent;
    border: none;
    outline: none;
}
#infografik .image .hotspot svg {
    color: #111;
}
#infografik .image .hotspot svg > circle {
    transform-origin: center;
    transition: all .2s ease-in-out;
}
#infografik .image .hotspot svg > circle:first-child {
    fill: #CCC4AD;
    opacity: .6;
    stroke: #CCC4AD;
}
#infografik .image .hotspot svg > circle:nth-child(2) {
    stroke: currentColor;
}
#infografik .image .hotspot svg > circle:nth-child(3) {
    fill: currentColor;
}

#infografik .image .hotspot.selected svg {
    color: #111;
}
#infografik .image .hotspot.selected svg > circle:first-child {
    fill: #FBE730;
    stroke: #FBE730;
    opacity: 1;
}

#infografik .side {
    position: relative;
    background-color: #F1F1F1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#infografik .side:before {
    border-bottom: 8px solid #F1F1F1;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: 100%;
    content: "";
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
#infografik.sideopen .side:before {
    opacity: 1;
}

#infografik .side .close {
    display: none;
    width: 30px;
    height: 30px;
    background-color: transparent;
    z-index: 2;
    padding: 0;
    margin: 0;
    color: rgba(94, 90, 80, 0.8);
    transition: color .2s linear;
}

#infografik .slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#infografik .slider > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    left: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.6s;
    transform: translate(0px, 0px);
}

#infografik .slider > ul > li {
    float: left;
    position: relative;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

#infografik .slider > ul > li.current {
    pointer-events: all;
}

#infografik .picarea {
    padding: 0;
    flex: none;
}

#infografik .pic {
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 2 / 1;
    width: 100%;
}

#infografik .copyright {
    margin: 0;
    padding: .4rem 1.5rem 0;
    font-size: 11px;
}

#infografik .textarea {
    padding: 1.5rem;
    flex: 1;
}

#infografik .textarea h4 {
    margin: 0 0 .5em;
    font-style: normal;
}

#infografik .navi {
    padding: .3rem 1.5rem 1rem;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: .5rem;
}

#infografik .navi .pages {
    font-size: 1em;
    font-weight: 600;
    margin: 0 .25em;
}

#infografik .navi button {
    appearance: none;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: .8em;
    text-transform: uppercase;
    display: block;
}

#infografik .navi button[disabled] {
    opacity: .5;
}

#infografik .navi button svg {
    margin-top: .1em;
    width: .8em;
    height: .8em;
    vertical-align: baseline;
}

@media only screen and (min-width: 760px) {

    #infografik .slider > ul > li {
        flex-direction: row-reverse;
    }

    #infografik .picarea {
        padding: 1rem 1.5rem 1rem 0;
    }

    #infografik .pic {
        width: 370px;
    }

}

@media only screen and (min-width: 1200px) {

    #infografik {
        aspect-ratio: 2 / 1;
        flex-direction: row;
    }

    #infografik .imagearea {
        transition: min-width .5s;
        display: flex;
        align-items: center;
    }

    #infografik .side {
        min-width: 320px;
        height: 100%;
        transition: visibility 0s .5s;
        visibility: hidden;
    }

    #infografik.sideopen .imagearea {
        min-width: calc(100% - 320px);
    }

    #infografik.sideopen .side {
        transition: none;
        visibility: visible;
    }

    #infografik .side:before {
        border-bottom: 10px solid transparent;
        border-right: 8px solid #F1F1F1;
        border-top: 10px solid transparent;
        bottom: auto;
        left: auto;
        opacity: 0;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        transition: opacity .5s;
    }

    #infografik .side .close {
        display: block;
        position: absolute;
        right: 5px;
        top: 5px;
    }

    #infografik .side .close > svg {
        width: 30px;
        height: 30px;
    }

    #infografik .slider {
        flex: 1;
    }

    #infografik .slider > ul {
        height: 100%;
    }

    #infografik .slider > ul > li {
        height: 100%;
        flex-direction: column;
    }

    #infografik .picarea {
        padding: 0;
    }

    #infografik .pic {
        width: 100%;
    }

    #infografik .textarea {
        overflow-x: hidden;
        overflow-y: auto;
    }

    #infografik .navi {
        flex: none;
    }

}

/* Infografik Inhalte ------------------ */

/* Überschriften der Inhaltsbereiche */
.infografik-content-header {
    color: #111;
    font-weight: 500;
    word-wrap: break-word;
    margin-bottom: 1rem !important;
    font-size: 27px;
    line-height: 38px;
    font-family: "Roboto", sans-serif;
    border-top: 1px solid #DCDCDE;
    padding-top: 30px;
}

/* Highlights */
#infografik-highlights {
    display: flex;
    gap: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 4rem;
}

#infografik-highlights .highlight {
    box-shadow: 0 0 32px rgba(0,0,0,.08);
    background-color: #fff;
    width: 100%;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    justify-content: flex-end;
    font-family: "Roboto", sans-serif;
}

#infografik-highlights .title {
    display: block;
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    color: #010101;

    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#infografik-highlights .value {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    line-height: 30px;
    text-transform: uppercase;
    color: #010101;

    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media only screen and (min-width: 672px) {

    #infografik-highlights {
        justify-content: space-around;
    }

    #infografik-highlights .highlight {
        width: 200px;
    }
}

@media only screen and (min-width: 1019px) {

    #infografik-highlights .highlight {
        padding: 1.5rem;
        width: 250px;
    }
}

/* Header */
.infografik-header {
    margin: 0 !important;
}

.infografik-header h1.tdb-title-text {
    color: #a9a794;
    font-weight: 900;
    text-transform: uppercase;
    word-wrap: break-word;
    font-size: 41px;
    line-height: 50px;
    margin-bottom: 2rem;
}

/* Seiteninhalt */
.infografik-pagecontent {
    margin: 0 0 2rem !important;
    padding-left: 0 !important;
}

/* Video */
#infografik-video {
    margin-bottom: 2rem;
}

#infografik-video video {
    width: 100%    !important;
    height: auto   !important;
}

#infografik-video .youtubeWrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

#infografik-video .youtubeWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Galerie */
#infografik-gallery {
    margin-bottom: 2rem;
}

/* Karte */
#infografik-map {
    margin-bottom: 2rem;
}

#infografik-map .pic {
    padding: .5rem;
    background-color: #E9E6DB;
}

#infografik-map .pic img {
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    display: block;
}

/* Interview */
#infografik-interview {
    margin-bottom: 2rem;
}

#infografik-interview blockquote {
    margin: 0;
}

#infografik-interview blockquote p {
    font-family: "Roboto", sans-serif;
    font-size: 1em;
    line-height: 1.74;
    text-align: left;
    font-weight: inherit;
    text-transform: none;
    color: inherit;
    margin: 0;
}

#infografik-interview blockquote pre {
    background-color: #f1f1f1;
    font-family: monospace, monospace;
    font-size: 0.9em;
    padding: 4px 10px;
    border: none;
    margin-top: 1rem;
    font-style: italic;
    text-align: left;
    color: #222;
    line-height: 1.74;
}

/* Hersteller */
#infografik-manufactor {
    margin-bottom: 2rem;
}

#infografik-manufactor > div {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

#infografik-manufactor .pic {
    flex: none;
    padding: .5rem 0;
    background-color: #fff;
}

#infografik-manufactor .pic img {
    max-width: 200px;
    height: auto;
    margin: 0 !important;
    display: block;
}

#infografik-manufactor .cont {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25em;
    background-color: #f1f1f1;
    padding: .5rem 1rem;
}

#infografik-manufactor .name {
    font-weight: 700;
    color: #222;
}

#infografik-manufactor p {
    margin: 0;
    font-size: 0.9em;
}

#infografik-manufactor .link {
    font-size: 0.9em;
}

@media only screen and (min-width: 560px) {
    #infografik-manufactor > div {
        flex-direction: row;
    }
}


/* Galerie-Slider ------------------ */

.wrkt-slider {
    background-color: #fff;
}

.wrkt-slider .slides-area {
    display: block;
    overflow: hidden;
    position: relative;
}

.wrkt-slider .slides-area ul {
    width: 50000px;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    transition: transform .6s;
    transform: translate(-356px, 0px);
}

.wrkt-slider .slides-area ul.notrans {
    transition: none;
}

.wrkt-slider .slides-area ul li {
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
}

.wrkt-slider .slides-area ul li .pic {
    background-color: #e9e9e9;
    opacity: .3;
    transition: opacity .6s;
    background-repeat: none;
    background-size: cover;
    background-position: center center;
    aspect-ratio: 4 / 3;
    width: 100%;
}

.wrkt-slider .slides-area ul li.current:not(.clone) .pic {
    opacity: 1;
}

.wrkt-slider .slides-area ul li .caption {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 1rem 0;
    padding: 0;
    opacity: 0;
    transition: opacity .6s;
    line-height: 1.5em;
    max-height: 3em;
    font-size: .9em;
}

.wrkt-slider .slides-area ul li.current .caption {
    opacity: 1;
}

.wrkt-slider .slides-area .btns {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrkt-slider .slides-area .btns > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    margin: 10px;
    color: #666;
    width: 16.66%;
    height: 100%;
    background-color: transparent;
    opacity: .4;
    transition: opacity .3s;
}

.wrkt-slider .slides-area .btns > a:last-child {
    justify-content: flex-end;
}

.wrkt-slider .slides-area .btns > a:hover {
    opacity: 1;
}

.wrkt-slider .slides-area .btns svg {
    width: 25px;
    height: 25px;
}

@media (min-width: 640px) {
    .wrkt-slider .slides-area .btns svg {
        width: 50px;
        height: 50px;
    }
}

.wrkt-slider .navi {
    padding: 1rem 0;
    margin: 0 16.66%;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: .5rem;
    border-top: 1px solid #DCDCDE;
}

.wrkt-slider .navi .pages {
    font-size: 1em;
    font-weight: 600;
    margin: 0 .25em;
}

.wrkt-slider .navi a {
    appearance: none;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: .8em;
    text-transform: uppercase;
    display: block;
    text-decoration: none;
}

.wrkt-slider .navi a svg {
    margin-top: .1em;
    width: .8em;
    height: .8em;
    vertical-align: baseline;
}