/* COLOR PALETTE */

:root {
    --white: #FFFFFF;
    --black: #000000;
    --rosa: #FAD9F3;
    --rosa-2: #F6BCEA;
    --pink: #E74CC8;
    --hellgrün: #BCF6C8;
    --mittelgrün: #4CE76B;
    --dunkelgrün:#629C1D;
    --indigo: #2B0F90;
    --dunkellila: #571D9C;
}

/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hidden {
    display: none;
}

body {
    list-style: none;
}

li, ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: var(--black);
}

/* UTILITY */

img, video, svg {
    object-fit: cover;
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
}

/* TYPO MOBILE */

body {
    font-family: "Lexend", sans-serif;
    font-size: 20px;
    line-height: 150%;
}

body.rtl {
    direction: rtl;
    font-family: "Lexend", sans-serif;
}

body.ru, body.uk, body.sr {
    font-family: "Didact Gothic", sans-serif;
    font-weight: 400;
}


h1, h2 {  
    font-family: "Zalando Sans Expanded", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 110%;
    font-size: 32px;
}

h1 {
    font-weight: 900;
}

h2 {
    font-weight: 800;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.reden__liste li h2 {
    font-weight: 700;
}

.home .block__heading, .rede__titel h2 {
    text-wrap: auto;
}

body.ru h1, body.uk h1, body.ru h2, body.uk h2, body.sr h1, body.sr h2{
    font-family: "Unbounded", sans-serif;
    font-weight: 700;
}

body.rtl h1, body.rtl h2 {
    font-family: "Almarai", sans-serif;
    font-weight: 800;
}

.info p, .time p{
    font-family: "Lexend Mega", sans-serif;
    font-weight: 300;
}

.ru .info, .ru .info, .sr .info, .ru .time, .uk .time, .sr .time {
    font-family: "Didact Gothic", sans-serif;
    font-weight: 400;
    letter-spacing: 4.4px;
}

.info p.rtl, .time p.rtl {
    font-family: "Lexend Mega", sans-serif;
    font-weight: 300;
}

/* BASIS */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--rosa);
}

body p:not(footer p) {
    text-wrap: balance;
}

main {
    background-color: var(--rosa);
}

body:not(.leicht) .hinweis__ls {
    display: none;
}

/* MOBILE */  

/* BUTTONS */

    .rede .language__button {
        width: fit-content;
    }

    .zeitplan__pfeil {
        width: 44px;
    }

    .rtl .zeitplan__pfeil {
        transform: rotate(180deg);
    }

    /* LANG BUTTON / MENU */

    .header {
        position: fixed;
    }

    .logo {
        padding: 16px 10px 0 10px;
    }

    .logo svg {
        mix-blend-mode: difference;
    }
    
    .menu {
        position: fixed;
        width: 100%;
        pointer-events: all;
        bottom: 0;
    }

    .menu button {
        border-top: 2px solid var(--black);
    }

    .menu__button {
        display: flex;
        width: 100%;
        height: 88px;
        background-color: var(--rosa);
        justify-content: space-between;
        align-items: center;
        padding: 18px 20px;
        border: none;
        cursor: pointer;
    }

    .rede button.menu__button, .rede nav {
        background-color: var(--hellgrün) !important;
    }

    .menu__button svg {
        width: 52px;
        height: 52px;
    }

    .burger__button {
        display: flex; /* to ensure that each span element occupies its own line. */
        flex-direction: column;
        justify-content: space-between;
        width: 55px;
        height: 35px;
        position: relative; /* allow for positioning changes in relation to the parent div.*/
    }

    .burger__button span {
        width: 100%;
        height: 3px;
        background-color: black;
    }

    .menu__nav {
        visibility: hidden;
        display: none;
    }

    /* MENU OPEN */

    .menu__nav.is__open {
        visibility: visible;
        display: flex;
        position: absolute;
        bottom: 88px;
        width: 100%; 
        height: calc(100vh - 88px);
        background: var(--rosa);
        list-style-type: none;
        z-index: -1;
        justify-content: center;
        align-items: center;
    }

     .menu__button.is__open {
        display: flex;
        width: 100%;
        height: 88px;
        background-color: var(--rosa);
        justify-content: end;
        align-items: center;
        padding: 18px 20px;
        cursor: pointer;
    }

    .menu__button svg.hidden {
        visibility: hidden;
        display: none;
    }

    .line__2.is__open { 
        display: none;
    }

    .line__1.is__open { 
        transform: rotate(45deg) translate(-4px, -1px);
        transform-origin: 0% 0%;
    }

    .line__3.is__open { 
        transform: rotate(-45deg) translate(-4px, 0px);
        transform-origin: 0% 100%;
    }

    .burger__button.is__open {
        display: flex; /* to ensure that each span element occupies its own line. */
        transform: translateX(10px);
    }

    /* ------------------------ */

    .menu__open li {
        padding: 25px 0;
    }

    .menu__open li h1{
        text-align: center;
    }

    .lang__name, .language__button svg {
        pointer-events: none;
    }


    .language__switcher {
        display: flex;
        justify-content: center;
        z-index: 9999;
        overflow: hidden;
        padding: 20px 0;
    }

    .language__button {
        display: flex;
        flex-direction: row;
        cursor: pointer;
        border: none !important;
        background-color: transparent;
        font-family: "Zalando Sans Expanded", sans-serif;
        font-size: 32px;
        font-weight: 900;
        align-items: center;
        gap: 20px;
    }

    body.uk .language__button, body.ru .language__button, body.sr .language__button {
        font-family: "Unbounded", sans-serif;
        font-weight: 700;
    }

    .lang__name {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .language__button svg {
        width: 54px;
        flex-shrink: 0;
    }

    .language__button svg .cls-1 {
        stroke-width: 2px;
        stroke: var(--helllila);
    }

    /* DROPDOWN */

    .dropdown__content {
        display: none;
        overflow: scroll;
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100vh - 88px);
        background-color: var(--white);
        scrollbar-width: none;
    }

    .dropdown__content:first-child, .dropdown__content:last-child{
        border-top: 0px;
    }

    .dropdown__content::-webkit-scrollbar {
        display: none;
    }

    #language__menu li {
        text-align: center;
        padding: 1.25rem;
        font-size: 1.5rem;
        pointer-events: all;
        border-top: 2px solid var(--black);
        font-family: "Noto Sans", sans-serif;
    }

    #language__menu li a {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
    }

    #language__menu li.current {
        background-color: var(--rosa);
    }

    .rede #language__menu li.current {
        background-color: var(--hellgrün);
    }

    #language__menu li:hover {
        background-color: var(--rosa);
    }

    .rede #language__menu li:hover {
        background-color: var(--mittelgrün);
    }

    #language__menu li:active {
        background-color: var(--rosa-2);
    }

     .rede #language__menu li:active {
        background-color: var(--dunkelgrün);
    }

    
    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
    .show {
        display:flex;
        flex-direction: column;
    }

/* HOME */

.home__titel__untertitel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10vh;
    margin-bottom: 5vh;
    padding: 3em 20px 20px 20px;
}

.home__titel {
    color: var(--indigo);
    text-transform: uppercase;
}

.home__untertitel p {
    line-height: 130%;
    font-family: "Lexend Mega", sans-serif;
    font-weight: 300;
}

.section__margin {
    margin-top: 4em;
}

.abschnitt__titel {
    border-top: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
    padding: 20px 20px;
    width: 100%;
}

.hinweis__ls {
    border: 2px solid black;
    padding: 1rem;
    margin-bottom: 3rem;
}

.hinweis__ls li {
    list-style: initial;
    margin-left: 1rem;
}

.reden__liste {
    padding: 20px;
    /*hyphens: auto;*/
}

.reden__liste ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.reden__liste li {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: var(--indigo);
    color: var(--hellgrün);
    padding: 16px;
}

 .heading__info {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

/* REDE */

body.rede {
    background-color: var(--hellgrün);
}

.rede__main, .rede footer, .rede.menu__button {
    background-color: var(--hellgrün) !important;
}

.rede__titel__info, .impressum__titel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10vh;
    padding: 3em 20px 20px 20px;
    background-color: var(--dunkellila);
    color: var(--hellgrün);
}

.rede__titel {
    hyphens: auto;
}

body.leicht .rede__info {
    text-align: left;
    font-style: normal;
}

.rede__text {
    padding: 20px;
    border-bottom: 1px solid var(--black);
}

.rede__disclaimer {
    padding: 20px;
    border-bottom: 1px solid var(--black);
}

body.leicht .rede__text, body.leicht .rede__text p, body.leicht .rede__text p.hinweis{
    -ms-word-break: initial;
    word-break: initial;

    /* Non standard for WebKit */
    word-break: initial;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

body.leicht .rede__text {
    font-size: 1.25rem;
    line-height: 150%;
}

.rede__text ul li{
    list-style: initial;
    font-size: 1.25rem;
   /* list-style-position: inside;*/
    margin-left: 1.25rem;
}

body.rtl .rede__text ul li{
    margin-right: 1.25rem;
    margin-left: 0;
}

/* LEICHTE SPRACHE HINWEISE */

body.leicht .rede__text .hinweis {
    border: 2px solid black;
    padding: 1em;
    margin: 1em 0;
}

body.leicht .rede__text .bold {
    font-weight: 600;
}

body.rtl .rede__disclaimer {
    font-style: normal;
    font-weight: 300;
}

.buttons__nav {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--black);
}

.buttons__nav button {
    border: none;
    background-color: transparent;
}

.button__prev, .button__next {
    cursor: pointer;
    display: flex;
    width: fit-content;
}

.button__prev svg {
  transform: rotate(180deg);
}

.button__prev a, .button__next a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.button__prev svg, .button__next svg {
    height: 37px;
    width: fit-content;
}

.button__prev svg path, .button__next svg path{
    fill: var(--black);
}

body.rtl .button__prev {
    order: 2;
}

body.rtl .button__next {
    order: 1;
}

/* IMPRESSUM */

.impressum .impressum__copyright a {
    text-decoration: underline 1px;
    text-underline-offset: 10%;
}

.impressum__text {
    padding: 20px;
    text-wrap: balance;
    hyphens: auto;
}


/* FOOTER */

    .footer {
        display: flex;
        flex-direction: column;
        height: fit-content;
        padding: 15vh 1.25rem 8rem 1.25rem;
        gap: 1rem;
    }

    .footer .impressum__copyright {
        margin-top: 3rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        font-size: 16px;
    }

    body.leicht .footer .orga ul li {
        list-style: initial;
        margin-left: 1.25rem;
    }

    body.leicht .orga ul li a {
        text-decoration: none;
        color: blue;
    }

    .footer a {
        text-decoration: underline 1px;
        text-underline-offset: 10%;
    }

    body.leicht .footer .impressum__copyright a {
        text-decoration: none;
        color: blue;
    }


/* MOBILE LANDSCAPE */

@media only screen and (max-width: 960px) and (orientation: landscape) {
   
/* HOME */

.home__titel__untertitel {
    text-align: center;
}

.home__untertitel p {
    font-size: 1.25rem;
    text-align: center;
}

body.rtl .home__untertitel p {
    text-align: center;
}

.menu__open {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    width: 80%;
    align-items: center;
    justify-content: center;
    height: fit-content;
}

.menu__open li {
    padding: 0;
    height: fit-content;
}

.language__switcher {
    height: fit-content;
    width: fit-content;
    padding: 0;
}

/* DROPDOWN */

.dropdown__content {
    width: 100%;
}

  }

/* TABLET */

@media screen and (min-width: 481px) and (orientation: portrait), screen and (min-width: 1000px) and (orientation: landscape) {
  
    /* TYPO */ 

    h1 {
        font-size: 56px;
    }

    h2 {
        font-size: 40px;
    }

    .abschnitt__titel h1 {
        font-size: 40px;
    }

    .info {
        font-size: 20px;
    }

    /* HEADER */

    .logo {
        position: fixed;
        z-index: 9999;
        left: 0;
    }

    .menu {
        width: fit-content;
        bottom: initial;
        top: 0;
        right: 0;
    }

    .menu__button {
        display: block;
        width: initial;
    }

    .menu button {
        border: none;
        background-color: transparent !important;
    }

    .rede button.menu__button {
        background-color: transparent !important;
    }

    .menu__button svg {
        display: none;
        visibility: hidden;
    }

    .menu__nav.is__open {
        bottom: initial;
        width: 100vw;
        height: fit-content;
        top: 0;
        right: 0;
        border-bottom: 2px solid var(--black);
    }

    .menu__open {
        display: flex;
        flex-direction: column;
        gap: 70px;
        width: 100%;
        height: fit-content;
        margin-top: 88px;
        padding: 10px 20px 30px;
    }

    .menu__items {
        display: flex;
        gap: 40px;
        flex-wrap: wrap;
    }

    .menu__open li {
        padding: 0;
        height: fit-content;
    }

    .menu__open li h1, .lang__name {
        font-size: 40px;
    }

    .language__switcher {
        height: fit-content;
        width: fit-content;
        padding: 0;
    }

    .language__menu {
        width: fit-content;
    }

    .dropdown__content {
        top: 295px;
        left: 93px;
        height: 50vh;
        border: 2px solid var(--black);
        width: fit-content;
    }

    #language__menu li a {
        justify-content: start;
    }



    /* HOME */

    .home__titel__untertitel {
        height: 80vh;
        padding: 0 10%;
        gap: 10vh;
        justify-content: center;
        margin-bottom: 0;
        text-align: center;
    }

    .home__untertitel p {
        font-size: 24px;
        text-align: center;
    }

    body.rtl .home__untertitel p {
        text-align: center;
    }

    .abschnitt__titel {
        padding: 20px 10%;
    }

    .reden__liste {
        padding: 20px 10%;
    }

    .reden__liste li {
        display: grid;
        grid-template-columns: 145px auto auto;
        gap: 15px;
    }

    .home .punkt__4 .block__heading, .home .punkt__4 .info {
        grid-column: 2 / span 2;
    }

    .zeitplan__pfeil {
        justify-self: end;
    }


    /* REDEN */

    .reden .reden__liste li, .workshops .reden__liste li {
        grid-template-columns: 80px auto auto;
    }

    .workshops .heading__info, .workshops .block__text:not(.time) {
    grid-column: 2 / span 2;
    }

    /* REDE */

    .rede__titel__info {
        padding: 3em 10% 20px;
    }

    .rede__text, .buttons__nav, .rede__disclaimer {
        padding: 20px 10%;
    }

    /* IMPRESSUM */

    .impressum__text {
        padding: 20px 10%;
    }

}


/* TABLET LANDSCAPE */

@media screen and (min-width: 900px) and (orientation: landscape) {

    /* HOME */

    .home__titel__untertitel {
        padding: 0 15%;
    }

    .abschnitt__titel {
        padding: 20px 15%;
    }

    .reden__liste {
        padding: 20px 15%;
    }

    /* REDE */

    .rede__titel__info {
        padding: 3em 15% 20px;
    }

    .rede__text, .buttons__nav, .rede__disclaimer {
        padding: 20px 15%;
    }

    /* IMPRESSUM */

    .impressum__text {
        padding: 20px 15%;
    }

}


/* DESKTOP */

@media screen and (min-width: 1200px) {
    
    /* TYPO */

    h1 {
        font-size: 60px;
    }

    .info, .time p{
        font-size: 20px;
    }

    p {
        font-size: 20px;
        line-height: 150%;
    }

    .footer .impressum__copyright, .footer p{
        font-size: 20px;
    }

    /* HEADER */

    .header {
        position: absolute;
    }

    .logo {
        padding: 0px;
        z-index: initial;
        position: initial;
    }

    .logo svg {
        mix-blend-mode: difference;
        position: fixed;
        z-index: 2;
        margin: 40px;
        left: 0;
    }

    .logo svg g path {
        fill: var(--white);
    }

    .menu {
        position: initial;
        width: fit-content;
    }

    .menu__button {
        position: fixed;
        top: 0;
        right: 0;
        height: initial;
        padding: 40px;
        mix-blend-mode: difference;
        z-index: 1;
    }

    .menu__button.is__open {
        width: fit-content;
        height: fit-content;
        padding: 40px;
        z-index: 2;
        width: fit-content;
    }

    .burger__button span {
        background-color: var(--white);
    }

    .burger__button.is__open {
        transform: translateX(15px);
    }

    .menu__nav.is__open {
        position: fixed;
        z-index: 1;
        right: initial;
        width: 100%;
    }

    .menu__open {
        padding: 10px 40px 30px;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 100px;
    }

    #language__menu {
        top: 193px;
        right: 40px;
        left: initial;
    }

    #language__menu li a{
        justify-content: end;
    }

    /* HOME */

    .section__margin {
    margin-top: 6em;
    }

    .home__titel__untertitel {
        padding: 10% 15% 5em;
        min-height: fit-content;
    }
    
    .home__untertitel p {
        font-size: 20px;
    }

    .abschnitt__titel {
        padding: 20px 20%;
    }

    .reden__liste{
        padding: 60px 20%;
    }

    .reden__liste ul{
        gap: 40px;
    }

    .reden__liste li {
        grid-template-columns: 180px auto auto;
        padding: 20px;
    }

    .zeitplan__pfeil {
        width: 72px;
    }

    /* REDEN */

    .reden .reden__liste ul li {
        grid-template-columns: 180px auto auto;
    }

    /* REDE */

    .section__rede {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .rede__titel__info {
        width: 100%;
        align-items: center;
        padding: 240px 0 3em;
        gap: 3em;
    }

    .rede__titel, .rede__info {
        width: 1110px;
    }

    .rede__text {
        padding: 40px 0;
        width: 1110px;
        border: none;
    }

    .buttons__nav {
        position: initial;
        margin-top: 0;
        padding: 0;
        width: 100%;
        border: none;
        padding: 40px;
    }

    .button__next, .button__prev {
        padding: 40px;
    }

    .button__next svg, .button__prev svg {
        height: 52px;
        position: fixed;
        top: 240px;
        mix-blend-mode: difference;
    }

    .button__next svg path, .button__prev svg path {
        fill: var(--white);
    }

    /* IMPRESSUM */

    main .impressum {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

    .impressum__titel, .impressum__text {
        grid-column: 3/11;
    }

    /* FOOTER */

    .footer {
        padding-bottom: 5rem;
        padding-top: 17rem;
    }
    
}