@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Nunito+Sans:wght@300;400;600;700&display=swap);

.fade-enter-active[data-v-76a0ad2b] {
    transition: opacity 5s
}

.fade-leave-active[data-v-76a0ad2b] {
    transition: opacity .5s
}

.fade-enter[data-v-76a0ad2b], .fade-leave-to[data-v-76a0ad2b] {
    opacity: 0
}

:root {
    --host-column-width: 1140px;
    --column-width: 1140px;
    --max-width: 1140px;
    --side-column-width: 15vw;
    --side-column-max: 320px;
    --side-column-padding: 220px;
    --section-padding: 40px;
    --quote-pull: -100px;
    --quote-width: 320px;
    --sweat-offset: 236px;
    --infogram-width: 764px;
    --base-font-size: 17px;
    --small-font-size: 0.9rem;
    --heading-xxl: 2.5rem;
    --heading-xl: 1.7rem;
    --heading-l: 1.5rem;
    --heading-m: 1.4rem;
    --heading-s: 1.15rem;
    --heading-xs: 0.9rem;
    --base-text: 1rem;
    --base-break: 1rem
}

#app {
    font-family: Nunito Sans,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: var(--copy-color);
    line-height: 1.2rem
}

#app, p {
    font-size: var(--base-text)
}

p {
    line-height: 1.4em;
    margin-top: 0;
    margin-bottom: var(--base-break)
}

.smallprint p {
    font-size: var(--small-font-size);
    line-height: 1.25rem
}

    .smallprint p a {
        word-break: break-all
    }

h1, h2, h3, h4 {
    font-weight: 500;
    color: var(--irena-blue);
    margin-top: 0;
    margin-bottom: var(--base-break);
    clear: both
}

h1 {
    font-size: var(--heading-xl)
}

h2 {
    font-size: var(--heading-l)
}

h2, h3 {
    font-weight: 700
}

h3 {
    font-size: var(--heading-m);
    /*margin-top: 20px;
    border-top: 2px solid var(--tint-col);
    padding-top: 40px*/
}

h4 {
    font-size: var(--heading-s);
    font-weight: 700
}

h5 {
    font-size: var(--heading-xs);
    color: #000
}

p.first:first-letter {
    color: var(--irena-blue);
    font-weight: 700;
    float: left;
    font-size: 2.8rem;
    line-height: 2.7rem;
    margin-right: .2em
}

.italic-intro {
    font-weight: 500;
    font-style: italic;
    color: var(--irena-blue);
    margin-bottom: 0
}

ol {
    padding-left: 1.5em
}

    ol li {
        font-size: var(--base-text);
        line-height: 1.75rem;
        margin-bottom: 1em
    }

.Highlight_Text, em {
    font-weight: 700;
    font-size: 1.25rem;
    font-style: italic;
    color: var(--irena-blue)
}

.bold {
    font-weight: 600
}

.sub {
    vertical-align: sub;
    line-height: 0
}

.sub, .super {
    font-size: .7em
}

.super {
    vertical-align: super
}

.weto-note, .weto-source {
    font-size: var(--small-font-size)
}

a, a:visited {
    color: var(--irena-blue)
}

    a:hover, a:visited:hover {
        color: var(--accent)
    }

blockquote.weto-highlight {
    background-color: transparent;
    border-top: none;
    border-bottom: none;
    max-width: 320px;
    min-height: auto;
    font-style: italic;
    font-size: 1.25rem;
    float: left;
    transition: all .8s ease-in-out;
    margin: 0;
    margin-left: var(--quote-pull);
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 20px;
    padding: 40px 0 40px 30px;
    text-align: right;
    font-weight: 700;
    color: var(--irena-blue);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    background-color: #fff
}

    blockquote.weto-highlight span {
        opacity: 1
    }

    blockquote.weto-highlight sub {
        display: inline !important
    }

    blockquote.weto-highlight:after {
        transition: all .8s ease-in-out;
        content: "";
        display: flex;
        width: 4px;
        align-self: center;
        max-height: 0;
        margin-left: 20px;
        background-color: var(--page-color)
    }

@media screen and (max-width:767px) {
    blockquote.weto-highlight {
        text-align: center;
        display: block;
        margin-left: 0;
        margin-right: 0;
        padding: 20px 10px;
        margin: 20px 20px 30px 20px;
        max-width: 100%;
        border-top: 2px solid var(--irena-blue);
        border-bottom: 2px solid var(--irena-blue)
    }
}

@media screen and (min-width:1201px) {
    blockquote.weto-highlight {
        margin-right: -60px;
        margin-left: 0
    }

        blockquote.weto-highlight span {
            transition: all .8s ease-in-out;
            opacity: 0
        }

        blockquote.weto-highlight.unfold {
            margin-right: 40px;
            margin-left: -100px;
            background-color: #fff
        }

            blockquote.weto-highlight.unfold span {
                opacity: 1;
                transition-delay: .4s;
                right: 0;
                width: 380px
            }

            blockquote.weto-highlight.unfold:after {
                transition-delay: .4s;
                align-self: stretch;
                max-height: 400px
            }
}

.weto-focus blockquote.weto-highlight, .weto-tint blockquote.weto-highlight {
    padding-right: 40px
}

    .weto-focus blockquote.weto-highlight:after, .weto-tint blockquote.weto-highlight:after {
        display: none
    }

:root {
    --irena-blue: #0071a5;
    --accent: #1aa8eb;
    --home-col: #17446d;
    --chap-1-col: #17638c;
    --chap-2-col: #1782ac;
    --chap-3-col: #17a1cc;
    --chap-4-col: #17aed0;
    --chap-5-col: #18bbd5;
    --chap-6-col: #18c8da;
    --chap-7-col: #19d5df;
    --fond-col: #f0f0f0;
    --tint-col: #e0edf3;
    --subtle-grey: #f0f0f0;
    --space-col: #072541;
    --darkness: #00060c;
    --copy-color: #2c3e50;
    --box-copy-color: #0a4966
}

.page-0, :root {
    --page-color: var(--home-col);
    --prev-color: var(--home-col)
}

.page-0, .page-1, :root {
    --next-color: var(--chap-1-col)
}

.page-1 {
    --page-color: var(--chap-1-col)
}

.page-1, .page-2 {
    --prev-color: var(--chap-1-col)
}

.page-2 {
    --page-color: var(--chap-2-col);
    --next-color: var(--chap-3-col)
}

.page-3 {
    --prev-color: var(--chap-2-col);
    --page-color: var(--chap-3-col);
    --next-color: var(--chap-4-col)
}

.page-4 {
    --prev-color: var(--chap-3-col);
    --page-color: var(--chap-4-col);
    --next-color: var(--chap-5-col)
}

.page-5 {
    --prev-color: var(--chap-4-col);
    --page-color: var(--chap-5-col);
    --next-color: var(--chap-6-col)
}

.page-6 {
    --prev-color: var(--chap-5-col);
    --page-color: var(--chap-6-col)
}

.page-6, .page-7 {
    --next-color: var(--chap-7-col)
}

.page-7 {
    --prev-color: var(--chap-6-col);
    --page-color: var(--chap-7-col)
}

#weto-box-0 a, .icon, .weto-btn i, .weto-burger-toggle i, .weto-prev-next .weto-next i, .weto-prev-next .weto-prev i, .weto-prev-next i {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%
}

.weto-btn {
    background-color: var(--irena-blue);
    text-decoration: none;
    padding: 10px 15px;
    font-weight: 700;
    border-radius: 3px;
    color: #fff
}

    .weto-btn:hover, .weto-btn:visited {
        color: #fff !important
    }

.weto-btn {
    text-align: center;
    display: inline-block;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left
}

    .weto-btn i {
        display: flex;
        flex-shrink: 0;
        height: 30px;
        width: 30px;
        margin: 0;
        padding: 0
    }

    .weto-btn.compact {
        font-size: .9em
    }

figure.weto-table {
    margin: 0;
    margin-bottom: 40px;
    padding: 0
}

    figure.weto-table h2, figure.weto-table h3, figure.weto-table h4 {
        color: var(--copy-color);
        font-weight: 500
    }

@media screen and (max-width:767px) {
    figure.weto-table {
        overflow-x: scroll
    }
}

table {
    border-collapse: separate;
    border-spacing: 1px
}

    table p {
        font-size: var(--small-font-size);
        line-height: 1.1em;
        margin-bottom: 0
    }

    table thead {
        border-bottom: 20px solid #fff
    }

        table thead th {
            position: relative;
            vertical-align: top;
            padding: .5em;
            border-bottom: 10px solid var(--irena-blue)
        }

            table thead th:before {
                content: "";
                position: absolute;
                width: 100%;
                height: 10px;
                display: block;
                left: 0;
                bottom: -18px;
                z-index: 20;
                background-color: var(--tint-col)
            }

            table thead th:after {
                content: "";
                position: absolute;
                z-index: 30;
                width: 0;
                height: 0;
                display: block;
                border: solid transparent;
                border-color: transparent;
                border-top-color: var(--irena-blue);
                border-width: 10px;
                margin-left: -10px;
                left: 50%;
                bottom: -25px
            }

    table tbody tr:first-child td, table tbody tr:first-child th {
        border: 0;
        margin-top: -2px;
        padding-top: 20px
    }

    table tbody td, table tbody th {
        vertical-align: top;
        padding: .5em;
        background-color: var(--tint-col)
    }

    table .weto-table-separator {
        background-color: transparent;
        border-bottom: none
    }

        table .weto-table-separator:after, table .weto-table-separator:before {
            display: none
        }

    table.striped tr:nth-child(odd) {
        background: #b8d1f3
    }

    table.striped tr:nth-child(2n) {
        background: #dae5f4
    }

.weto-poster {
    position: relative;
    width: 100%;
    height: 300px;
    overflow-y: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    background-color: var(--space-col);
    transition: height .5s ease-in-out
}

.page-0 .weto-poster {
    height: 55vh;
    background-color: var(--darkness)
}

    .page-0 .weto-poster h1.poster-title {
        font-size: var(--heading-xxl)
    }

    .page-0 .weto-poster .pathway-arrow {
        transform: translateX(0)
    }

    .page-0 .weto-poster .weto-poster img {
        object-position: center center
    }

    .page-0 .weto-poster .irena-logo {
        opacity: 1
    }

.irena-logo {
    opacity: 0;
    background-image: url(../img/Logo_IRENA.png);
    background-size: contain;
    background-position: 100%;
    background-repeat: no-repeat;
    display: block;
    width: 220px;
    height: 80px;
    position: absolute;
    z-index: 3000;
    top: 30px;
    right: 0
}

.pathway-arrow {
    transform: translateX(-50vw);
    transition: transform .5s ease-in-out;
    height: 60px;
    position: relative;
    width: 200px;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    margin-top: 20px;
    margin-left: -400px;
    padding-left: 400px;
    font-size: 1.5rem;
    background-color: var(--irena-blue)
}

    .pathway-arrow:after {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        left: 100%;
        top: 0;
        border: 30px solid transparent;
        border-left: 30px solid var(--irena-blue)
    }

.weto-poster img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    object-fit: cover;
    object-position: center center;
    transition: object-position .5s ease-in-out
}

.weto-poster-overlay {
    position: relative;
    z-index: 20;
    padding-top: 40px;
    width: var(--column-width);
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: left
}

    .weto-poster-overlay h1, .weto-poster-overlay h2 {
        margin: 0;
        padding: 0;
        display: block;
        color: #fff
    }

        .weto-poster-overlay h1.poster-title a {
            color: #fff;
            text-decoration: none
        }

        .weto-poster-overlay h1.poster-title {
            color: #fff;
            font-weight: 500;
            text-transform: uppercase;
            line-height: 1.1em;
            transition: font-size .5s ease-in-out;
            font-size: 1.4rem
        }

            .weto-poster-overlay h1.poster-title strong {
                font-weight: 900
            }

@media screen and (max-width:767px) {
    .weto-poster-overlay h1.poster-title {
        padding-left: 10px
    }
}

.cta-box {
    display: none
}

#app.page-0 .cta-box {
    display: flex
}

.cta-box {
    position: relative;
    z-index: 30;
    width: var(--desktop-column-width);
    max-width: var(--desktop-column-max);
    margin: 0 auto;
    flex-direction: column;
    align-items: flex-end
}

    .cta-box a {
        margin-bottom: 20px
    }

    .cta-box .btn-start-reading {
        background-color: var(--accent);
        box-shadow: 0 6px 15px -4px rgba(0,0,0,.47);
        margin-bottom: 10px;
        width: 25%
    }

        .cta-box .btn-start-reading i {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' width='29.63mm' height='29.63mm' viewBox='0 0 84 84' stroke='transparent'%3E%3Cpath fill='%23fff' d='M52.71 42.5L35.38 59.83l-4.09-4.09L44.54 42.5 31.29 29.26l4.09-4.09L52.71 42.5z'/%3E%3C/svg%3E")
        }

    .cta-box .btn-download {
        box-shadow: 0 6px 15px -4px rgba(0,0,0,.47);
        margin-bottom: 10px;
        width: 25%
    }

        .cta-box .btn-download i {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' width='29.63mm' height='29.63mm' viewBox='0 0 84 84' stroke='transparent'%3E%3Cpath fill='%23fff' d='M59.33 29.26L42 46.58 24.68 29.26l4.08-4.09L42 38.42l13.25-13.25 4.08 4.09z'/%3E%3Cpath d='M69.33 37.68v22.85a1.66 1.66 0 01-1.67 1.66H16.33a1.66 1.66 0 01-1.66-1.66V37.68h5.77v18a.78.78 0 00.77.78h41.56a.78.78 0 00.78-.78v-18z' fill='%23fff'/%3E%3C/svg%3E")
        }

.weto-figure {
    margin: 0;
    padding: 0;
    clear: both;
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 2px solid var(--tint-col);
    padding-top: 20px;
    border-bottom: 2px solid var(--tint-col);
    padding-bottom: 20px
}

@media screen and (max-width:767px) {
    .weto-figure {
        margin-bottom: 20px;
        padding-top: 10px;
        padding-bottom: 10px
    }

        .weto-figure, .weto-figure img {
            margin-top: 10px
        }
}

.weto-figure img {
    margin-bottom: 20px
}

.weto-figure h2, .weto-figure h3, .weto-figure h4 {
    color: var(--copy-color);
    font-weight: 500
}

.weto-figure.notop {
    border-top: none
}

.weto-figure.nobottom {
    border-bottom: none
}

.weto-app-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    vertical-align: middle
}

.weto-fig-number {
    font-weight: 700;
    color: var(--irena-blue);
    margin-right: .25em
}

.infogram-figure {
    margin: 0;
    padding: 0;
    position: relative;
    clear: both;
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 2px solid var(--tint-col);
    padding-top: 20px;
    border-bottom: 2px solid var(--tint-col);
    padding-bottom: 20px
}

    .infogram-figure.notop {
        border-top: none;
        margin-top: 0
    }

@media screen and (max-width:1199px) {
    .infogram-figure {
        position: relative;
        padding-top: calc(1%*var(--aspect-ratio))
    }

        .infogram-figure iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important
        }
}

.infogram-figure iframe {
    width: var(--infogram-width);
    height: calc(var(--infogram-width)/var(--i-width)*var(--i-height))
}

:root {
    --box-items: 8
}

.weto-sweatband {
    height: 160px;
    margin-top: -160px;
    position: relative;
    z-index: 89;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center
}

    .weto-sweatband.pinned {
        top: var(--sweat-offset);
        position: fixed;
        width: 100%
    }

        .weto-sweatband.pinned .weto-visor {
            height: 56px
        }

        .weto-sweatband.pinned .weto-visor-title {
            padding: 10px 0;
            top: 0;
            bottom: 0;
            left: 10px;
            right: 0
        }

            .weto-sweatband.pinned .weto-visor-title h1 {
                font-size: .9rem
            }

@media screen and (max-width:991px) {
    .page-1 .weto-sweatband.pinned .weto-visor-title h1 {
        font-size: .7rem
    }
}

.weto-sweatband.pinned .weto-chap-title {
    justify-content: flex-start
}

.weto-sweatband.pinned .weto-chap-num {
    font-size: 34px
}

@media screen and (max-width:991px) {
    .weto-sweatband.pinned .weto-chap-num {
        font-size: 1.4rem
    }
}

.weto-sweatband.pinned .weto-prev-next {
    display: none
}

.weto-sweatband.pinned .weto-left-pagination, .weto-sweatband.pinned .weto-right-pagination {
    align-items: flex-start
}

.weto-sweatband .weto-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin: 0 auto
}

@media screen and (max-width:1199px) {
    .weto-sweatband .weto-container {
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        width: var(--column-width)
    }
}

.weto-prev-next {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    width: 100%
}

@media screen and (max-width:1199px) {
    .weto-prev-next {
        display: none
    }
}

.weto-prev-next i {
    display: block;
    height: 52px;
    width: 52px;
    margin: 0;
    padding: 0
}

.weto-prev-next .weto-prev i {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' width='29.63mm' height='29.63mm' viewBox='0 0 84 84' stroke='transparent'%3E%3Cpath fill='%23fff' d='M44.74 58.41L28.83 42.5l15.91-15.91 2.67 2.67L34.17 42.5l13.24 13.24-2.67 2.67z'/%3E%3C/svg%3E")
}

.weto-prev-next .weto-next {
    margin-left: auto
}

    .weto-prev-next .weto-next a {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        text-decoration: none;
        color: #fff;
        font-weight: 600
    }

    .weto-prev-next .weto-next i {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' width='29.63mm' height='29.63mm' viewBox='0 0 84 84' stroke='transparent'%3E%3Cpath fill='%23fff' d='M35.38 26.59L51.29 42.5 35.38 58.41l-2.67-2.67L45.95 42.5 32.71 29.26l2.67-2.67z'/%3E%3C/svg%3E")
    }

.weto-left-pagination {
    width: var(--side-column-width);
    max-width: var(--side-column-max);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
}

@media screen and (max-width:1199px) {
    .weto-left-pagination {
        display: none
    }
}

.weto-right-pagination {
    width: var(--side-column-width);
    max-width: var(--side-column-max);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start
}

@media screen and (max-width:1199px) {
    .weto-right-pagination {
        margin-left: 0 !important;
        width: var(--column-width);
        width: 100%;
        max-width: 100%
    }
}

.weto-nextBoxes, .weto-prevBoxes {
    list-style-type: none;
    margin: 0;
    padding: 0;
    min-height: 56px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    transition-property: margin-right,margin-left;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.55,0,.1,1)
}

.weto-prevBoxes {
    margin-right: calc(100%/var(--box-items)*(var(--box-items) - 1)*-1)
}

.weto-nextBoxes {
    margin-left: calc(100%/var(--box-items)*1*-1)
}

@media screen and (max-width:1199px) {
    .weto-nextBoxes {
        margin-left: 0 !important;
        min-height: auto
    }
}

.weto-prevBoxes.at_0 {
    margin-right: calc(100%/var(--box-items)*var(--box-items)*-1)
}

.weto-nextBoxes.at_0 {
    margin-left: calc(100%/var(--box-items)*1*-1)
}

.weto-prevBoxes.at_1 {
    margin-right: calc(100%/var(--box-items)*(var(--box-items) - 1)*-1)
}

.weto-nextBoxes.at_1 {
    margin-left: calc(100%/var(--box-items)*2*-1)
}

.weto-prevBoxes.at_2 {
    margin-right: calc(100%/var(--box-items)*(var(--box-items) - 2)*-1)
}

.weto-nextBoxes.at_2 {
    margin-left: calc(100%/var(--box-items)*3*-1)
}

.weto-prevBoxes.at_3 {
    margin-right: calc(100%/var(--box-items)*(var(--box-items) - 3)*-1)
}

.weto-nextBoxes.at_3 {
    margin-left: calc(100%/var(--box-items)*4*-1)
}

.weto-prevBoxes.at_4 {
    margin-right: calc(100%/var(--box-items)*(var(--box-items) - 4)*-1)
}

.weto-nextBoxes.at_4 {
    margin-left: calc(100%/var(--box-items)*5*-1)
}

.weto-prevBoxes.at_5 {
    margin-right: calc(100%/var(--box-items)*(var(--box-items) - 5)*-1)
}

.weto-nextBoxes.at_5 {
    margin-left: calc(100%/var(--box-items)*6*-1)
}

.weto-prevBoxes.at_6 {
    margin-right: calc(100%/var(--box-items)*(var(--box-items) - 6)*-1)
}

.weto-nextBoxes.at_6 {
    margin-left: calc(100%/var(--box-items)*7*-1)
}

.weto-prevBoxes.at_7 {
    margin-right: calc(100%/var(--box-items)*(var(--box-items) - 7)*-1)
}

.weto-nextBoxes.at_7 {
    margin-left: calc(100%/var(--box-items)*8*-1)
}

.weto-prevBoxes.at_8 {
    margin-right: calc(100%/var(--box-items)*(var(--box-items) - 8)*-1)
}

.weto-nextBoxes.at_8 {
    margin-left: calc(100%/var(--box-items)*9*-1)
}

.weto-box {
    margin-right: 0;
    margin-left: 0;
    padding: 1em 0;
    width: calc(100%/var(--box-items));
    background-color: var(--chap-1-col)
}

@media screen and (max-width:1199px) {
    .weto-box {
        width: 100%
    }

        .weto-box .router-link-exact-active {
            position: relative
        }

            .weto-box .router-link-exact-active:after {
                content: "";
                width: 0;
                height: 0;
                border-left: 15px solid transparent;
                border-right: 15px solid transparent;
                border-top: 15px solid var(--home-col);
                position: absolute;
                bottom: -30px;
                left: 50%;
                margin-left: -15px
            }

    @media screen and (max-width:767px) {
        .weto-box .router-link-exact-active:after {
            bottom: -15px
        }
    }
}

@media screen and (max-width:767px) {
    .weto-box {
        padding: .5em 0
    }
}

.weto-box a {
    display: block;
    font-weight: 700;
    color: #fff;
    text-decoration: none
}

    .weto-box a:hover {
        color: #fff
    }

#weto-box-0 {
    background-color: var(--home-col)
}

    #weto-box-0 a {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' width='29.63mm' height='29.63mm' viewBox='0 0 84 84' stroke='transparent'%3E%3Cpath d='M42 4.61L6 28.8v44.38h23.23V47.25h24.88v25.93H78V28.8z' fill='%23fff'/%3E%3C/svg%3E")
    }

        #weto-box-0 a span {
            opacity: 0
        }

    #weto-box-0 .router-link-exact-active:after {
        border-top: 15px solid var(--home-col)
    }

#weto-box-1 {
    background-color: var(--chap-1-col)
}

    #weto-box-1 .router-link-exact-active:after {
        border-top: 15px solid var(--chap-1-col)
    }

#weto-box-2 {
    background-color: var(--chap-2-col)
}

    #weto-box-2 .router-link-exact-active:after {
        border-top: 15px solid var(--chap-2-col)
    }

#weto-box-3 {
    background-color: var(--chap-3-col)
}

    #weto-box-3 .router-link-exact-active:after {
        border-top: 15px solid var(--chap-3-col)
    }

#weto-box-4 {
    background-color: var(--chap-4-col)
}

    #weto-box-4 .router-link-exact-active:after {
        border-top: 15px solid var(--chap-4-col)
    }

#weto-box-5 {
    background-color: var(--chap-5-col)
}

    #weto-box-5 .router-link-exact-active:after {
        border-top: 15px solid var(--chap-5-col)
    }

#weto-box-6 {
    background-color: var(--chap-6-col)
}

    #weto-box-6 .router-link-exact-active:after {
        border-top: 15px solid var(--chap-6-col)
    }

#weto-box-7 {
    background-color: var(--chap-7-col)
}

    #weto-box-7 .router-link-exact-active:after {
        border-top: 15px solid var(--chap-7-col)
    }

.weto-visor {
    position: relative;
    height: 160px;
    width: var(--column-width);
    max-width: var(--max-width);
    color: #fff;
    background: linear-gradient(90deg,var(--page-color),var(--prev-color))
}

@media screen and (max-width:1199px) {
    .weto-visor {
        width: 100%;
        max-width: 100%
    }
}

.page-0 .weto-visor {
    background: linear-gradient(135deg,var(--darkness),var(--prev-color))
}

.weto-visor-title {
    position: absolute;
    top: var(--section-padding);
    left: var(--section-padding);
    right: var(--section-padding);
    display: flex;
    flex-direction: row
}

    .weto-visor-title strong:after {
        content: "";
        display: block
    }

@media screen and (min-width:1201px) {
    .weto-visor-title {
        top: 20px;
        left: 20px
    }
}

@media screen and (max-width:767px) {
    .weto-visor-title {
        top: 20px
    }
}

.weto-chap-num {
    font-size: 4rem;
    font-weight: 700;
    border-right: 3px solid #fff;
    padding: 0 .25em 0 0;
    margin-right: .25em;
    line-height: 1em;
    text-align: center
}

.page-0 .weto-chap-num {
    display: none
}

@media screen and (max-width:767px) {
    .weto-chap-num {
        font-size: 2rem
    }
}

.weto-chap-title {
    display: flex;
    flex-grow: 1;
    flex-direction: column
}

    .weto-chap-title h1, .weto-chap-title h2 {
        margin: 0;
        padding: 0;
        color: #fff;
        text-align: left;
        text-transform: uppercase;
        line-height: 1.1em;
        font-size: var(--heading-l);
        font-weight: 500;
        max-width: 80%
    }

        .weto-chap-title h1 strong, .weto-chap-title h2 strong {
            font-weight: 700
        }

@media screen and (max-width:767px) {
    .weto-chap-title h1, .weto-chap-title h2 {
        font-size: var(--heading-s)
    }

        .weto-chap-title h1 strong, .weto-chap-title h2 strong {
            display: inline
        }
}

.weto-main-content {
    display: block;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    text-align: left;
    width: var(--column-width);
    max-width: var(--max-width);
    overflow: visible;
    margin-bottom: 180px
}

    .weto-main-content .weto-container {
        display: block;
        box-sizing: border-box;
        position: relative
    }

    .weto-main-content section {
        background-color: #fff;
        padding: 0 var(--section-padding) var(--section-padding) var(--section-padding);
        padding-right: var(--side-column-padding);
        border-top: 40px solid var(--fond-col)
    }

        .weto-main-content section.intro-section {
            border-top: none;
            padding-top: 40px
        }

        .weto-main-content section.full {
            padding-right: 80px
        }

        .weto-main-content section.weto-tint {
            background-color: var(--tint-col)
        }

.belt {
    margin-left: calc(var(--section-padding)*-1);
    margin-right: calc(var(--side-column-padding)*-1);
    margin-bottom: var(--section-padding);
    padding: var(--section-padding);
    background: linear-gradient(90deg,var(--space-col),var(--page-color));
    clear: both
}

    .belt h1, .belt h2, .belt h3, .belt h4 {
        color: #fff;
        margin: 0
    }

        .belt h1 span, .belt h2 span, .belt h3 span, .belt h4 span {
            font-weight: 700
        }

#weto-side-menu {
    position: absolute;
    top: 40px;
    right: -80px;
    width: 280px;
    background-color: var(--space-col);
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    transition-delay: .75s
}

#app.complete #weto-side-menu {
    opacity: 1
}

@media screen and (max-width:1199px) {
    #weto-side-menu {
        width: 240px;
        right: -40px
    }
}

@media screen and (max-width:991px) {
    #weto-side-menu {
        width: 220px;
        right: -10px
    }
}

@media screen and (max-width:767px) {
    #weto-side-menu, #weto-side-menu .scrollmagic-pin-spacer {
        display: none
    }
}

#app.leave #weto-side-menu {
    transition-duration: .1s;
    transition-delay: 0s;
    opacity: 0
}

#weto-side-menu {
    color: #fff;
    padding: 10px 5px;
    border-bottom: 4px solid var(--page-color);
    z-index: 20
}

    #weto-side-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0
    }

        #weto-side-menu ul li {
            transition: all .2s ease-in-out;
            max-height: 200px;
            overflow: hidden
        }

            #weto-side-menu ul li.active a {
                color: #fff
            }

            #weto-side-menu ul li.chapter a {
                display: block;
                position: relative
            }

                #weto-side-menu ul li.chapter a span:nth-child(2) {
                    display: block;
                    border-bottom: 1px solid var(--page-color);
                    margin-bottom: 10px;
                    padding-bottom: 20px
                }

                #weto-side-menu ul li.chapter a:after {
                    content: "⤒";
                    transition: opacity .4s ease-in-out;
                    transition-delay: 1s;
                    opacity: 0;
                    display: block;
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    font-weight: 500;
                    font-size: 1.1em
                }

        #weto-side-menu ul a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
            padding: .5rem 1rem;
            display: flex;
            flex-direction: row;
            align-items: stretch
        }

            #weto-side-menu ul a span.prefix {
                font-weight: 700;
                margin-right: .25em
            }

            #weto-side-menu ul a.current {
                background: #000
            }

    #weto-side-menu.compact li {
        max-height: 0;
        opacity: 0
    }

        #weto-side-menu.compact li.active {
            opacity: 1;
            max-height: 200px
        }

        #weto-side-menu.compact li.chapter {
            padding: 0;
            margin: 0
        }

            #weto-side-menu.compact li.chapter a:after {
                opacity: 1
            }

    #weto-side-menu.compact:hover li {
        opacity: 1;
        max-height: 200px
    }

    #weto-side-menu.compact:hover:after {
        opacity: 0
    }

    #weto-side-menu.compact:after {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid var(--page-color);
        content: " ";
        position: absolute;
        z-index: 10;
        top: 100%;
        left: 50%;
        margin-left: -10px
    }

    #weto-side-menu .weto-side-number {
        display: block;
        font-size: 2.1em;
        font-weight: 700;
        line-height: 1.2em
    }

.page-0 #weto-side-menu .weto-side-number {
    display: none
}

#weto-side-menu .cover {
    display: flex;
    flex-direction: column;
    align-items: center
}

    #weto-side-menu .cover figure {
        box-shadow: 0 4px 30px 1px rgba(44,191,255,.5);
        background-color: var(--subtle-grey);
        margin-bottom: -15px
    }

        #weto-side-menu .cover figure img {
            width: 240px;
            height: 320px;
            display: block
        }

    #weto-side-menu .cover .btn-start-reading {
        background-color: var(--accent);
        box-shadow: 0 6px 15px -4px rgba(0,0,0,.47);
        margin-bottom: 10px;
        width: 65%
    }

        #weto-side-menu .cover .btn-start-reading i {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' width='29.63mm' height='29.63mm' viewBox='0 0 84 84' stroke='transparent'%3E%3Cpath fill='%23fff' d='M52.71 42.5L35.38 59.83l-4.09-4.09L44.54 42.5 31.29 29.26l4.09-4.09L52.71 42.5z'/%3E%3C/svg%3E")
        }

    #weto-side-menu .cover .btn-download {
        box-shadow: 0 6px 15px -4px rgba(0,0,0,.47);
        margin-bottom: 10px;
        width: 65%
    }

        #weto-side-menu .cover .btn-download i {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' width='29.63mm' height='29.63mm' viewBox='0 0 84 84' stroke='transparent'%3E%3Cpath fill='%23fff' d='M59.33 29.26L42 46.58 24.68 29.26l4.08-4.09L42 38.42l13.25-13.25 4.08 4.09z'/%3E%3Cpath d='M69.33 37.68v22.85a1.66 1.66 0 01-1.67 1.66H16.33a1.66 1.66 0 01-1.66-1.66V37.68h5.77v18a.78.78 0 00.77.78h41.56a.78.78 0 00.78-.78v-18z' fill='%23fff'/%3E%3C/svg%3E")
        }

.weto-burger-toggle {
    position: absolute;
    z-index: 300;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

    .weto-burger-toggle i {
        display: block;
        width: 52px;
        height: 52px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' width='29.63mm' height='29.63mm' viewBox='0 0 84 84' stroke='transparent'%3E%3Cpath fill='%23fff' d='M34.51 32.8h23.91v4.12H34.51zM34.51 41.2h23.91v4.12H34.51zM34.51 49.59h23.91v4.12H34.51z'/%3E%3Ccircle cx='28.09' cy='34.86' r='2.52' fill='%23fff'/%3E%3Ccircle cx='28.09' cy='43.26' r='2.52' fill='%23fff'/%3E%3Ccircle cx='28.09' cy='51.66' r='2.52' fill='%23fff'/%3E%3C/svg%3E")
    }

    .weto-burger-toggle.active .weto-burger-menu {
        display: block
    }

.weto-burger-menu {
    display: none;
    box-shadow: 5px 6px 15px 0 rgba(0,0,0,.15);
    background-color: #fff;
    color: #000;
    padding: 20px
}

    .weto-burger-menu ul {
        text-align: left;
        list-style-type: none;
        margin: 0;
        padding: 0
    }

        .weto-burger-menu ul a {
            display: block;
            color: #000;
            text-decoration: none;
            padding: .5em;
            border-bottom: 1px solid var(--subtle-grey);
            max-width: 320px;
            display: flex;
            flex-direction: row
        }

            .weto-burger-menu ul a span.number {
                font-weight: 700
            }

.weto-toc-menu {
    background-color: #fff;
    color: #000;
    padding: 0
}

    .weto-toc-menu ul {
        text-align: left;
        list-style-type: none;
        margin: 0;
        padding: 0
    }

        .weto-toc-menu ul a {
            display: block;
            color: #000;
            text-decoration: none;
            padding: .5em;
            border-bottom: 1px solid var(--subtle-grey);
            display: flex;
            flex-direction: row
        }

            .weto-toc-menu ul a span.number {
                font-weight: 700
            }

.v-popper--theme-weto-21 .v-popper__inner {
    background: #e9e9e9;
    color: #3d3d3d;
    padding: 12px;
    border-radius: 4px;
    max-width: 420px;
    font-family: Nunito Sans,Helvetica,Arial,sans-serif;
    font-size: var(--small-font-size)
}

.v-popper--theme-weto-21 .v-popper__arrow {
    border-color: #e9e9e9
}

.v-popper--has-tooltip {
    color: var(--accent);
    font-weight: 700;
    vertical-align: super;
    font-size: .7em;
    cursor: pointer
}

.footnote {
    display: none
}

#app {
    margin-top: -40px;
    margin-left: calc(-50vw - var(--host-column-width)/-2 + -15px);
    margin-right: calc(-50vw - var(--host-column-width)/-2 + -15px)
}

@media screen and (max-width:767px) {
    #app {
        max-width: 100vw;
        overflow-x: none;
        margin-left: -30px;
        margin-right: -30px
    }
}

body, html {
    margin: 0;
    padding: 0;
    background-color: var(--fond-col);
    font-size: var(--base-font-size)
}

html {
    scroll-behavior: smooth
}

#app {
    background-color: var(--fond-col);
    min-height: 100vh;
    padding-bottom: 120px
}

    #app #console, #app:after {
        display: none
    }

    #app:after {
        content: "mobile-tablet";
        position: fixed;
        bottom: 0;
        right: 60px;
        padding: 10px;
        color: #fff;
        text-transform: uppercase;
        font-size: 10px
    }

@media screen and (max-width:767px) {
    #app {
        --host-column-width: 100%;
        --column-width: 100%;
        --max-width: 100%;
        --side-column-width: 15vw;
        --side-column-max: 320px;
        --side-column-padding: 10px;
        --section-padding: 10px;
        --base-text: 0.9rem;
        --small-font-size: 0.8rem;
        --heading-xxl: 2rem;
        --heading-xl: 1.5rem;
        --heading-l: 1.15rem;
        --heading-m: 1.1rem;
        --heading-s: 1rem;
        --heading-xs: 0.9rem;
        --quote-pull: -10px;
        --quote-width: 280px;
        --sweat-offset: 232px;
        --infogram-width: 100%;
        --base-break: 0.25rem
    }

        #app:after {
            background-color: green;
            content: "mobile"
        }
}

@media screen and (min-width:769px) and (max-width:992px) {
    #app {
        --host-column-width: 720px;
        --column-width: 90%;
        --max-width: 90%;
        --side-column-width: 15vw;
        --side-column-max: 320px;
        --side-column-padding: 20px;
        --section-padding: 20px;
        --base-text: 0.9rem;
        --small-font-size: 0.8rem;
        --heading-xl: 1.5rem;
        --heading-l: 1.3rem;
        --heading-m: 1.2rem;
        --heading-s: 1.15rem;
        --heading-xs: 0.9rem;
        --quote-pull: -20px;
        --quote-width: 280px;
        --sweat-offset: 263px;
        --infogram-width: 100%
    }

        #app:after {
            background-color: orange;
            content: "mobile-tablet"
        }
}

@media screen and (min-width:993px) and (max-width:1200px) {
    #app {
        --host-column-width: 940px;
        --column-width: 940px;
        --max-width: 940px;
        --side-column-width: 15vw;
        --side-column-max: 320px;
        --side-column-padding: 260px;
        --section-padding: 20px;
        --base-text: 0.9rem;
        --small-font-size: 0.8rem;
        --heading-xl: 1.5rem;
        --heading-l: 1.3rem;
        --heading-m: 1.2rem;
        --heading-s: 1.15rem;
        --heading-xs: 0.9rem;
        --quote-pull: -60px;
        --quote-width: 320px;
        --infogram-width: 660px
    }

        #app:after {
            background-color: red;
            content: "tablet-desktop"
        }
}

@media screen and (min-width:1201px) and (max-width:1480px) {
    #app {
        --host-column-width: 1140px;
        --column-width: 960px;
        --max-width: 960px;
        --side-column-width: 15vw;
        --side-column-max: 320px;
        --side-column-padding: 220px;
        --section-padding: 40px;
        --quote-pull: -100px;
        --quote-width: 320px;
        --infogram-width: 700px
    }

        #app:after {
            background-color: #00f;
            content: "desktop-widescreen"
        }
}

@media screen and (min-width:1481px) {
    #app {
        --host-column-width: 1140px;
        --column-width: 1140px;
        --max-width: 1140px;
        --side-column-width: 15vw;
        --side-column-max: 320px;
        --side-column-padding: 220px;
        --section-padding: 40px;
        --quote-pull: -100px;
        --quote-width: 320px;
        --infogram-width: 700px
    }

        #app:after {
            background-color: #000;
            content: "widescreen"
        }
}

.weto-stage {
    position: relative
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}

.fade-enter, .fade-leave-to {
    opacity: 0
}

.slide-left-enter-active, .slide-left-leave-active, .slide-right-enter-active, .slide-right-leave-active {
    transition-duration: .5s;
    transition-property: height,opacity,transform;
    transition-timing-function: cubic-bezier(.55,0,.1,1);
    overflow: hidden
}

.slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    transform: translate(2em)
}

.slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    transform: translate(-2em)
}

.two-col {
    display: flex;
    flex-direction: row;
    flex: 1
}

@media screen and (max-width:767px) {
    .two-col {
        flex-direction: column
    }

        .two-col .scenario-box {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: 10px;
            margin-bottom: 20px
        }

            .two-col .scenario-box p {
                padding-bottom: 30px
            }
}

.two-col div, .two-col figure {
    flex: 1;
    margin-right: 20px;
    margin-left: 20px
}

    .two-col div:first-child, .two-col figure:first-child {
        margin-left: 0
    }

    .two-col div:flast-child, .two-col figure:flast-child {
        margin-right: 0
    }

.two-col figure {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.scenario-box {
    display: flex;
    align-items: stretch
}

    .scenario-box.yellow {
        --tint: #ffef92;
        --solid: #fcc427
    }

    .scenario-box.blue {
        --tint: var(--tint-col);
        --solid: var(--irena-blue)
    }

    .scenario-box p {
        background-color: var(--tint);
        padding: 1em;
        margin-bottom: 0
    }

    .scenario-box h1, .scenario-box h2, .scenario-box h3, .scenario-box h4 {
        position: absolute;
        bottom: -.5em;
        right: 20px;
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--solid)
    }

.scenario-box {
    position: relative;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-top: 20px;
    margin-bottom: 40px;
    border-top: 10px solid var(--solid);
    border-bottom: 10px solid var(--solid)
}

    .scenario-box:after, .scenario-box:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        display: block;
        border: solid transparent
    }

    .scenario-box:before {
        border-color: transparent;
        border-top-color: var(--solid);
        border-width: 10px;
        margin-left: -10px;
        left: 50%;
        top: 0
    }

    .scenario-box:after {
        border-color: transparent;
        border-bottom-color: var(--solid);
        border-width: 10px;
        margin-left: -10px;
        left: 50%;
        bottom: 0
    }

.weto-feature-box {
    background-color: var(--tint-col)
}

    .weto-feature-box h3 {
        margin-top: 10px;
        border-bottom: 1px solid var(--irena-blue);
        padding-bottom: 20px;
        padding-top: 0;
        margin-top: 0;
        border-top: none
    }

    .weto-feature-box p {
        color: var(--box-copy-color)
    }

.weto-feature-box {
    margin-left: var(--quote-pull);
    margin-right: var(--quote-pull);
    padding-right: var(--section-padding);
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    padding-left: var(--section-padding);
    margin-top: 40px;
    margin-bottom: 40px
}

    .weto-feature-box figure.weto-figure, .weto-feature-box table {
        border: 20px solid #fff;
        background-color: #fff;
        padding-top: 0;
        margin-top: 0
    }

        .weto-feature-box figure.weto-figure h3, .weto-feature-box figure.weto-figure h4, .weto-feature-box table h3, .weto-feature-box table h4 {
            padding-top: 0;
            margin-top: 0
        }

.weto-detail-box.a1 {
    --detail-color: #4379a0
}

.weto-detail-box.a2 {
    --detail-color: #5093b9
}

.weto-detail-box.a3 {
    --detail-color: #c9cfa1
}

.weto-detail-box.a4 {
    --detail-color: #0080c5
}

.weto-detail-box.a5 {
    --detail-color: #47a99d
}

.weto-detail-box .detail-head {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end
}

    .weto-detail-box .detail-head img {
        margin-left: auto
    }

.weto-detail-box .detail-head {
    height: 60px
}

    .weto-detail-box .detail-head h4, .weto-detail-box .detail-head h5 {
        margin-bottom: .2em
    }

.weto-detail-box .detail-head {
    border-bottom: 5px solid var(--detail-color);
    margin-bottom: 4px
}

    .weto-detail-box .detail-head:after {
        content: "";
        position: absolute;
        z-index: 30;
        width: 0;
        height: 0;
        display: block;
        border: solid transparent;
        border-color: transparent;
        border-top-color: var(--detail-color);
        border-width: 10px;
        margin-left: -10px;
        left: 40px;
        bottom: -25px
    }

.weto-detail-box {
    margin-bottom: 20px
}

    .weto-detail-box .detail-body {
        background-color: var(--subtle-grey);
        padding: 20px
    }

        .weto-detail-box .detail-body p {
            font-size: var(--small-font-size);
            line-height: 1.2em;
            margin-bottom: .5em
        }

.weto-focus {
    background-color: var(--tint-col);
    margin-right: calc(var(--side-column-padding)*-1);
    padding-right: var(--side-column-padding);
    margin-left: -40px;
    padding-left: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 40px;
    margin-bottom: 40px
}

    .weto-focus figure.weto-figure, .weto-focus table {
        border: 20px solid #fff;
        background-color: #fff;
        padding-top: 0;
        margin-top: 0
    }

        .weto-focus figure.weto-figure h3, .weto-focus figure.weto-figure h4, .weto-focus table h3, .weto-focus table h4 {
            padding-top: 0;
            margin-top: 0
        }

    .weto-focus .weto-feature-box {
        background-color: #fff
    }