.body {
    padding: 0;
    background-clip: border-box;
    flex-direction: column;
    height: auto;
}

.abovefold {
    padding: 3rem;
    background-color: #59476F;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: linear-gradient(150deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%), url(../assets/grafiken/uebersicht/StoryA1Schatten.jpg);
    background-size: cover;
    background-position: center;
}

.keyvisual {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: auto;
    aspect-ratio: 175 / 118.5;
    background-image: url(../assets/grafiken/uebersicht/StoryA2Schatten.jpg);
    background-size: cover;
    background-position: center;
    padding: 3rem;
}

.keyvisual .lichtschalter {
    margin-top: 0;
}

.abovefold h3 {
    margin-bottom: 1rem;
}

.lichtschalter {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    cursor: pointer;
}

.lichtschalter:hover > img {
    background-color: #ECA694;
}

.lichtschalter img {
    width: 3rem;
    height: 3rem;
    background-color: #59476F;
    border-radius: 5rem;
    padding: .5rem;
}

.lichtschalter .schalter {
    height: 3rem;
    width: auto;
    background-color: rgba(0,0,0,0);
    margin-left: 1.5rem;
    padding: 0;
}

.lichtschalter:hover > .schalter {
    background-color: rgba(0,0,0,0);
}

.schatten {
    display: none;
}

.scrollknopf,
.scrollknopfzwei {
    display: flex;
    position: fixed;
    align-items: center;
    top: 3rem;
    right: 3rem;
    z-index: 5;
}

.scrollknopfzwei {
    top: 7rem;
}

.scrollschrift,
.scrollschriftzwei {
    visibility: hidden;
    padding: 1rem;
    background-color: #ECA694;
    font-weight: 600;
}

.scrollknopfpfeil,
.scrollknopfpfeilzwei {
    margin-left: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 10rem;
    background-color: #30253D;
    padding: .75rem;
    cursor: pointer;
}

.scrollknopfpfeil img {
    margin-bottom: .25rem;
}

.scrollknopfpfeilzwei img {
    margin-top: .25rem;
}

.scrollknopfpfeil:hover {
    background-color: #ECA694;
}

.scrollknopfpfeilzwei:hover {
    background-color: #ECA694;
}

/* .scrollknopfpfeil:hover ~ .scrollschrift {
    visibility: visible;
}

.scrollknopfpfeilzwei:hover ~ .scrollschriftzwei {
    visibility: visible;
} */

.scrollknopf img {
    width: 100%;
    transform: rotate(180deg);
}

.scrollknopfzwei img {
    width: 100%;
    transform: rotate(0deg);
}

.weiterscrollen h5 {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 400;
}

.weiterscrollen {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 10vh;
    width: 100%;
    margin-bottom: 1.5rem;
}

.weiterscrollen img {
    height: 3rem;
    width: auto;
}

.inhaltsverzeichnis {
    display: flex;
    width: 100%;
    padding: 3rem;
    margin-top: 3rem;
}

.inhaltsverzeichnis * {
    color: #30253D;
}

.iv-links {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding-right: 1.5rem;
}

.iv-links a:hover {
    text-decoration: underline;
}

.iv-links > h3{
    margin-bottom: 1rem;
}

.iv-rechts {
    width: 50%;
    padding-left: 1.5rem;
    aspect-ratio: 1 / 1;
}

.iv-rechts img {
    width: 100%;
    aspect-ratio: 1 / 1;
}

#was {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 3rem;
}

#was * {
    color: #30253D;
}

#was > h3 {
    margin-bottom: 1.5rem;
}

#was > h5 {
    margin: 1.5rem 0;
}

.audio1 > h5 {
    margin: 1.5rem 0;
}

.audio1 {
    display: flex;
    align-items: center;
}

.audio1 audio {
    margin-left: 1rem;
}

.geschichte1 {
    display: flex;
    width: 100%;
}

.geschichte1-links {
    width: 50%;
    padding-right: 1.5rem;
}

.geschichte1-links p,
.geschichte1-rechts p {
    max-width: 40rem;
}

.geschichte1-rechts {
    display: flex;
    width: 50%;
    padding-left: 1.5rem;
}

.inhalte {
    background-color: #59476F;
    width: 100%;
    padding: 1.5rem 3rem;
}

.inhalte > div {
    padding: 3rem 0rem;
}

.inhalte-titel {
    display: flex;
    flex-direction: column;
}

.inhalte-titel h4 {
    display: flex;
}

.inhalte-pfeil {
    margin-left: 1.5rem;
    height: 1.5rem;
    transition: .5s;
    cursor: pointer;
}

.titelbox {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

#wie {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 3rem;
}

#wie * {
    color: #30253D;
}

#wie > h3 {
    margin-bottom: 1.5rem;
}

#wie > h5 {
    margin: 1.5rem 0;
}

/* .keyvisual img:last-child {
    display: none;
}

.keyvisual img:first-child:hover {
    display: none;
}

.keyvisual img:first-child:hover + img:last-child {
    display: block;
}

.keyvisual img {
    width: 100%;
} */

.strategien-links {
    width: 50%;
    padding-right: 1.5rem;
}

.strategien-rechts {
    width: 50%;
    padding-left: 1.5rem;
}

.strategie {
    width: 100%;
    display: flex;
    margin-top: 1.5rem;
}

.interaktion {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
}

.interaktion img {
    height: 3rem;
    margin-right: 1.5rem;
}

.strategien-auswahl {
    display: flex;
    width: 100%;
    margin-top: 1.5rem;
}

.strategien-slide {
    width: calc(100%/3);
    min-height: 100%;
}

.strategien-padding {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    background-color: #7A6C8C;
    border: solid 2px white;
    padding: 1rem;
    cursor: pointer;
    /* height: 10rem; */
}

.strategie-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 1.5rem;
}

.strategie-bild {
    height: 5rem;
    margin-left: .5rem;
}

.strategien-slide:nth-child(1) {
    padding-right: 1rem;
}

.strategien-slide:nth-child(2) {
    padding: 0 .5rem;
}

.strategien-slide:nth-child(3) {
    padding-left: 1rem;
}

.abschluss {
    padding: 3rem;
    display: flex;
    width: 100%;
    background-color: white;
}

.abschluss * {
    color: #30253D;
}

.abschluss-links {
    width: 50%;
    padding-right: 1.5rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.abschluss-rechts {
    display: flex;
    width: 50%;
    padding-left: 1.5rem;
    background-clip: content-box;
}

.abschluss-links h3 {
    margin-bottom: 1.5rem;
}

.ubersicht {
    display: flex;
    width: 100%;
}

.ubersicht-karte p {
    position: absolute;
}

.ubersicht-karte .h7 {
    margin-top: 3rem;
    position: absolute;
}

.mittig p {
    position: unset;
}

.mittig .h7 {
    position: unset;
    margin-top: 0;
}

.bildbox img {
    width: 100%;
    height: auto;
}

.ubersicht-karte {
    width: 25%;
    aspect-ratio: 1 / 1;
    /* background: linear-gradient(150deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); */
    background-clip: content-box;
    height: fit-content;
    cursor: pointer;
}

.ubersicht-karte:nth-child(1) {
    padding-right: .25rem;
    background: #59476F;
    background-clip: content-box;
}

.ubersicht-karte:nth-child(2),
.ubersicht-karte:nth-child(3) {
    padding: 0 .25rem;
}

.ubersicht-karte:nth-child(4) {
    padding-left: .25rem;
}

.ubersicht-karte p {
    padding-left: 1.5rem;
    padding-top: 1.5rem;
}

.ubersicht-karte .h7 {
    padding-left: 1.5rem;
    padding-top: .5rem;
}

.mittig {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 25%;
}

.mittig .h7 {
    padding-left: 0;
    padding-top: 0;
}

.mittig img {
    transform: rotate(-90deg);
    width: 1.25rem;
    margin-left: 1rem;
}

.fuszeile {
    display: flex;
    width: 100%;
    padding: 1.5rem;
    justify-content: space-between;
    align-items: center;
}

.fuszeile p {
    max-width: 45rem;
    padding-right: 1.5rem;
}

.fuszeile * {
    color: #30253D;
}

.notwendig * {
    font-size: 1rem;
    font-weight: bold;
}









.frage {
    display: none;
    max-width: 30rem;
    height: fit-content;
    flex-direction: column;
}

.frage-box {
    margin-top: 1.5rem;
    background-color: #7A6C8C;
    box-shadow:inset 0px 0px 0px 2px white;
    padding: 1rem;
    width: 100%;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-style: italic;
}


.frage-box:hover {
    background-color: #ECA694;
}

.auswahl {
    display: none;
    margin-top: 1.5rem;
    align-items: center;
}

.auswahl img {
    height: 3rem;
    margin-right: 1rem;
}

.overlay {
    margin-top: 1.5rem;
    display: none;
    padding: 1rem;
    position: absolute;
    width: 30rem;
    height: 21rem;
    align-items: center;
    justify-content: center;
    background-color: rgba(89, 71, 111, .9);
}

.overlay p {
    font-size: 1.25rem;
    color: #ECA694;
    font-weight: 600;
}

.inhalt {
    display: none;
    width: 100%;
    margin-top: 1.5rem;
}

.ursachen-inhalt {
    flex-direction: column;
}

.ursachentop {
    display: flex;
    width: 100%;
}

.inhalt-links {
    display: flex;
    flex-direction: column;
    padding-right: 1.5rem;
    width: 50%;
}

.inhalt-links p,
.inhalt-rechts p {
    max-width: 40rem;
}

.inhalt-rechts {
    display: flex;
    flex-direction: column;
    padding-left: 1.5rem;
    width: 50%;
}

.info {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
}

.info p {
    font-size: .8rem;
}

.infoknopf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: .75rem;
    border-radius: 5rem;
    border: 1px solid white;
    margin-right: 1rem;
    font-weight: 400;
    font-size: 1.25rem;
}

.strategie .strategien-rechts .info {
    margin-top: 0;
}

.download {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    background-color: #7A6C8C;
    padding: 1rem;
    width: fit-content;
    cursor: pointer;
}

.download:hover {
    background-color: #ECA694;
}


.download p {
    color: white;
    font-weight: 600;
    font-style: italic;
}

.download img {
    height: 1rem;
    margin-right: .5rem;
}

.graui {
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
    margin-top: 1.5rem;
}

.grau {
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
    margin-top: .5rem;
}

.grafik {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
}

.grafik div {
    display: flex;
    width: 100%;
    margin-top: 1.5rem;
    cursor: pointer;
    overflow: hidden;
}

.grafik img {
    min-width: 100%;
}

/* .grafik1 img:last-child {
    display: none;
}

.grafik1 img:first-child:hover {
    display: none;
}

.grafik1 img:first-child:hover + .grafik1 img:last-child {
    display: block;
}

.grafik1 img:last-child:hover {
    display: block;
}

.grafik2 img:last-child {
    display: none;
}

.grafik2 img:first-child:hover {
    display: none;
}

.grafik2 img:first-child:hover + img:last-child {
    display: block;
}

.grafik2 img:last-child:hover {
    display: block;
}

.grafik3 img:last-child {
    display: none;
}

.grafik3 img:first-child:hover {
    display: none;
}

.grafik3 img:first-child:hover + img:last-child {
    display: block;
}

.grafik3 img:last-child:hover {
    display: block;
}

.grafik4 img:last-child {
    display: none;
}

.grafik4 img:first-child:hover {
    display: none;
}

.grafik4 img:first-child:hover + img:last-child {
    display: block;
}

.grafik4 img:last-child:hover {
    display: block;
}

.grafik5 img:last-child {
    display: none;
}

.grafik5 img:first-child:hover {
    display: none;
}

.grafik5 img:first-child:hover + img:last-child {
    display: block;
}

.grafik5 img:last-child:hover {
    display: block;
}

.grafik6 img:last-child {
    display: none;
}

.grafik6 img:first-child:hover {
    display: none;
}

.grafik6 img:first-child:hover + img:last-child {
    display: block;
}

.grafik6 img:last-child:hover {
    display: block;
}

.grafik7 img:last-child {
    display: none;
}

.grafik7 img:first-child:hover {
    display: none;
}

.grafik7 img:first-child:hover + img:last-child {
    display: block;
}

.grafik7 img:last-child:hover {
    display: block;
} */

.grafik1initial img,
.grafik2initial img,
.grafik3initial img,
.grafik4initial img,
.grafik5initial img,
.grafik6initial img,
.grafik7initial img {
    display: none;
}




.loesung1,
.loesung2,
.loesung3 {
    margin-top: -3rem;
    display: none;
    width: 100%;
    background-clip: content-box;
}

.loesung-links {
    padding: 3rem;
    width: 50%;
    background-color: #E35072;
    border-bottom: .5rem solid #59476F;
    border-left: .5rem solid #59476F;
}

.loesung-links .info {
    margin-bottom: 1.5rem;
}

.loesung-links p {
    max-width: 50rem;
}

.loesung-rechts {
    width: 50%;
    display: flex;
}

.loesung-rechts-oben {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    width: 50%;
    background-color: white;
    border-bottom: .5rem solid #59476F;
}

.loesung-rechts-oben * {
    color: #30253D;
}

/* .loesung-rechts-oben .download {
    background-color: #ECA694;
} */

.loesung-rechts-oben .download * {
    color: white;
}

.loesung-rechts-unten {
    display: flex;
    width: 50%;
    background-color: #9EC8DD;
    border-bottom: .5rem solid #59476F;
    border-right: .5rem solid #59476F;
}

.loesung-rechts-unten img {
    width: 100%;
    height: fit-content;
}

.abschluss-rechts img {
    width: 100%;
    height: fit-content;
}

@media not all and (min-resolution:.001dpcm) { 
    @media screen and (min-width: 0px){
        .loesung-rechts-unten img {
            width: 100%;
            height: intrinsic;
        }
        
        .abschluss-rechts img {
            width: 100%;
            height: intrinsic;
        }
    }
}




.konsequenzen-inhalt .inhalt-rechts .grafik {
    margin-top: 0;
}


.zuklein {
    display: none;
}

.mobilelosung {
    display: none;
}




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

    .strategie-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .strategie-bild {
        margin-left: 0;
        margin-top: 1rem;
    }

    .loesung1,
    .loesung2,
    .loesung3 {
        flex-direction: column;
    }

    .loesung-links,
    .loesung-rechts {
        width: 100%;
        /* border: none; */
        border-bottom: none;
        border-right: #59476F solid .5rem;
    }

    .loesung-rechts-oben,
    .loesung-rechts-unten {
        border-right: none;
    }

    .loesung-rechts-oben {
        border-left: #59476F solid .5rem;
    }

    .loesung-rechts-unten img {
        max-width: 70%;
/*         height: fit-content; */
    }
    
}

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

    /* .grafik img {
        animation: zoom 30s infinite ease-in-out;
    } */

    /* @keyframes zoom {
        0%, 100% { 
            transform: scale(1); 
        }
        20% { 
            transform: scale(1.5) translateX(7.5rem) translateY(5rem); 
        }
        40% {
            transform: scale(1.5) translateX(-7.5rem) translateY(5rem);
        }
        60% {
            transform: scale(1.5) translateX(7.5rem) translateY(-5rem);
        }
        80% {
            transform: scale(1.5) translateX(-7.5rem) translateY(-5rem);
        }
    } */

    /* @keyframes zoom {
        0%, 100% { 
            transform: scale(1); 
        }
        40% {
            transform: scale(1); 
        }
        45% {
            transform: scale(1.1); 
        }
        50% {
            transform: scale(1.1); 
        }
        55% {
            transform: scale(1.1); 
        }
        60% {
            transform: scale(1); 
        }
    } */

    .abschluss-links h3 {
        margin-top: 1.5rem;
    }

    .loesung-rechts {
        flex-direction: column;
    }

    .loesung-rechts-oben,
    .loesung-rechts-unten {
        width: 100%;
    }

    .loesung-rechts-oben {
        border-bottom: none;
    }

    .loesung-rechts-unten {
        border-left: #59476F solid .5rem;
    }

    .loesung-rechts-unten img {
        max-width: 30rem;
    }

    .download img {
        height: 2rem;
        margin-right: 1rem;
    }

    .download {
        margin-top: 3rem;
    }
    
    .info p,
    .grau,
    .graui {
        font-size: 1.15rem;
    }

    #impressum p,
    #datenschutz p {
        font-size: 1rem;
        line-height: 1.4rem;
    }

    .scrollschrift,
    .scrollschriftzwei {
        display: none;
    }

    .inhalte,
    .abschluss,
    #was,
    .keyvisual {
        padding: 2.5rem;
    }

    /* .inhalte > div {
        padding: 1.5rem 0;
    } */

    .inhalt,
    .ursachentop {
        flex-direction: column;
    }

    .inhalt-links,
    .inhalt-rechts {
        width: 100%;
    }

    .inhalt-links,
    .strategien-links,
    .abschluss-links {
        padding-right: 0;
    }

    .inhalt-rechts {
        padding-left: 0;
        margin-top: 3rem;
    }

    .grafik {
        margin-top: 3rem;
    }

    .strategie {
        flex-direction: column;
    }

    .strategien-links,
    .strategien-rechts {
        width: 100%;
    }

    .strategien-rechts {
        padding-left: 0;
        margin-top: 1.5rem;
    }

    .audio1 {
        flex-direction: column;
        align-items: flex-start;
    }

    .audio1 audio {
        margin-left: 0;
        width: 100%;
        margin-bottom: 1.5rem;
    }
    
    .abschluss {
        flex-direction: column;
    }

    .ubersicht-karte {
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    .abschluss-links,
    .abschluss-rechts {
        width: 100%;
    }

    .abschluss-rechts {
        padding-left: 0;
        margin-top: 3rem;
    }

    .inhaltsverzeichnis {
        flex-direction: column;
    }

    .iv-links,
    .iv-rechts {
        width: 100%;
    }

    .iv-rechts {
        margin-top: 3rem;
    }

    .geschichte1 {
        flex-direction: column;
    }

    .geschichte1-links,
    .geschichte1-rechts {
        width: 100%;
    }

    .geschichte1-rechts {
        padding-left: 0;
        padding-top: 1.5rem;
    }

    .strategien-padding {
        height: fit-content;
        height: 100%;
    }

    .strategie-bottom p,
    .strategie-top p:last-of-type {
        display: none;
    }

    .strategie-bottom {
        margin-top: 0;
        align-items: flex-end;
    }

    .strategie-bild {
        margin-top: 0rem;
        width: 100%;
        max-width: 10rem;
        height: fit-content;
    }

    /* .ubersicht-karte .h7 {
        display: none;
    } */

    .ubersicht {
        flex-wrap: wrap;
    }

    .ubersicht-karte {
        min-width: 50%;
        max-width: 50%;
        padding: 0;
    }

    .ubersicht-karte:nth-child(1) {
        margin-bottom: .5rem;
    }

    .ubersicht-karte:nth-child(3) {
        padding-left: 0;
    }

    .ubersicht-karte:nth-child(2) {
        padding-right: 0;
        margin-bottom: .5rem;
    }

    .notwendig * {
        font-size: 1.25rem;
    }

    .zuklein {
        display: block;
        color: white;
        background-color: #59476F;
        font-size: 1.5rem;
        font-style: italic;
        padding: 2.5rem;
        margin-bottom: 1.5rem;
        margin-top: -2rem;
        min-width: 100%;
    }

    .mobilelosung {
        display: flex;
        flex-direction: column;
        margin-bottom: 1.5rem;
    }

    .mobilelosung h5 {
        margin-bottom: .5rem;
    }

    .strategien-auswahl {
        margin-top: 3rem;
    }

}

#impressum *,
#datenschutz * {
    color: black;
}

#impressum,
#datenschutz {
    padding: 3rem;
    max-width: 40rem;
}

#impressum ul,
#datenschutz ul {
    list-style-position: outside;
}

#impressum b,
#datenschutz b {
    font-size: 1.25rem;
    font-weight: 600;
}

#impressum h3,
#datenschutz h3 {
    color: #30253D;
}

.zurseite {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    cursor: pointer;
}

.zurseite img {
    width: 1.5rem;
    height: fit-content;
    transform: rotate(90deg);
    margin-right: 1rem;
}