/* Smartphone-Ansicht auf 499px gesetzt */

@font-face {
    font-family: 'Diatype Semi-Mono';
    src: url('../ASSETS/FONTS/ABCDiatypeSemi-MonoVariableEdu-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Helveesti';
    src: url('../ASSETS/FONTS/HelveestiVariableEdu-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Social';
    src: url('../ASSETS/FONTS/SocialVariableEdu-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Social_Zitat';
    src: url('../ASSETS/FONTS/SocialCondensedEdu-Bold.woff') format('woff');
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    position: relative;
}

.seiteVater, .seiteSohn {
    position: relative;
    transition: width 0.6s ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    width: 50vw;
}

.content {
    flex: 1 1 auto;
    overflow: auto;
    width: 100%;
    overflow-x: hidden;
    scrollbar-width: none;
}

.introPic {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    opacity: 0.35;
    transition: opacity 0.5s;
}

.introPic img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    z-index: 0;
}

.introTextFredi {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 0 1rem;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.introTextLeon {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 0 1rem;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    align-items: flex-end;
    text-align: right;
}

.introText{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    gap: 1.5rem;
}

.introHeading h1{
    font-size: 4rem;
    font-weight: 700;
    font-family: 'Diatype Semi-Mono';
    margin: 0 0 0.5rem 0;
    word-spacing: -1rem;
    letter-spacing: -0.1rem;
}

.introTextFredi .startFredi {
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
}

.introTextSubheading{
    max-width: 30rem;
}

.introTextSubheading p{
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: #ffffff;
    font-family: 'Helveesti';
    line-height: 1.7rem;
}

.seiteVater.expanded .bilderGalerie{
    flex-direction: row;
}

.introTextStartButton{
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.8);
}

.introTextStartButton:hover{
    cursor: pointer;
}

.arrow-svg{
    margin: 0;
    animation: arrow-bounce 1.6s ease-in-out infinite;
}

.startFredi{
    font-family: 'Diatype Semi-Mono';
    color: #fff;
    font-weight: 200;
    font-size: 1.5rem;
    margin: 0;
}

.startLeon{
    font-family: 'Diatype Semi-Mono';
    color: #fff;
    font-weight: 200;
    font-size: 1.5rem;
    margin: 0;
}

.scrollButtonContainer{
    margin: 0.5rem 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.seiteSohn .introTextLeon .introHeading h1,
.seiteSohn .introTextLeon .introTextSubheading p,
.seiteSohn .introTextLeon .startLeon {
    text-align: right;
}

.seiteSohn .introTextLeon .scrollButtonContainer {
    justify-content: center;
}

.seiteSohn .introTextLeon .introTextStartButton {
    align-items: center;
}

.seiteVater:hover .introTextFredi,
.seiteSohn:hover .introTextLeon{
    opacity: 1;
    pointer-events: auto;
}

.introPic:hover .introTextFredi,
.introPic:hover .introTextLeon {
    opacity: 1;
    pointer-events: auto;
}

.seiteVater:hover .introPic,
.seiteSohn:hover .introPic {
    opacity: 1;
    transition: opacity 0.5s;
}

.Inhalt{
    padding: 0.8rem;
}

.absatz1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: white;
    margin: 0 auto;
    font-size: 1.5rem;
    letter-spacing: 0.07rem;
    font-family: 'Social';
    padding: 0 3rem 0 3rem;
    max-width: 55rem;
    line-height: 1.25;
}

.heading{
    align-self: flex-start;
    width: 100%;
    text-align: left;
    font-size: 2.8rem;
    font-family: 'Helveesti';
    margin: 2rem 0 0 0;
}

.heading p{
    margin: 0;
}

.videoFullsize{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 60rem;
}

.videoFrame{
    margin-top: 2rem;
    width: 100%;
    max-width: 56rem;
    aspect-ratio: 16 / 9;
}

.videoDescription{
    align-self: flex-start;
    text-align: left;
    font-size: 1.2rem;
    font-weight: 200;
}

.bilderGalerie{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0 2rem 0;
    width: 100%;
    flex-wrap: wrap;
}

.bilderGalerie img{
    width: 25rem;
    height: auto;
}

.bildFull{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0 2rem 0;
    width: 100%;
}

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

.bildDescription{
    align-self: flex-start;
    text-align: left;
    font-size: 1.2rem;
    font-weight: 200;
}

.textBild{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    margin: 2rem 0 2rem 0;
    font-size: 1.5rem;
    letter-spacing: 0.07rem;
    font-family: 'Social';
    max-width: 55rem;
    justify-content: space-between;
    gap: 5rem;
}

.textBildText{
    max-width: 50%;
}

.bildTextRechts{
    max-width: 50%;
}

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

.zitatSmall{
    margin: 2rem 0 2rem 0;
    font-weight: 900;
    font-size: 1.9rem;
}

.seiteVater {
    background-color: #151515;
    border-right: 1px solid #333;
}
.seiteSohn {
    background-color: #151515;
    border-left: 1px solid #333;
}

.seiteVater, .seiteSohn {
    width: 50vw;
}

.seiteVater.collapsed, .seiteSohn.collapsed {
    width: 4rem;
}

.seiteVater.expanded, .seiteSohn.expanded {
    width: calc(100vw - 4rem);
}

.tabSohn, .tabVater {
    position: absolute;
    top: 50%;
    transform-origin: center;
    width: 7.5rem;
    height: 3rem;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgb(241,241,241);
    border: none;
    cursor: pointer;
    font-weight: 400;
    z-index: 3;
    white-space: nowrap;
    font-size: 1.2rem;
}

.seiteVater .tabVater {
    right: -2.75rem;
    border-radius: 0.25rem;
    transform: translateY(-50%) rotate(-90deg);
}

.seiteSohn .tabSohn  {
    left: -2.75rem;
    border-radius: 0.25rem;
    transform: translateY(-50%) rotate(90deg);
}

.seiteVater.collapsed .tabVater,
.seiteSohn.collapsed .tabSohn {
    display: flex;
}

.seiteVater.collapsed .content,
.seiteSohn.collapsed .content {
    opacity: 0.5;
    transition: opacity 0.3s;
    cursor: pointer;
}

.seiteVater.collapsed .Inhalt,
.seiteSohn.collapsed .Inhalt {
    padding: 0;
    margin: 0;
}

.seiteVater.expanded .content,
.seiteSohn.expanded .content {
    opacity: 1;
    transition: opacity 0.4s 0.15s;
}

.tabSohn:hover, .tabVater:hover {
    background: rgba(202, 202, 202, 0.18);
    color: rgb(241,241,241);
}

.seiteSohn .introTextLeon .introTextSubheading,
.seiteSohn .introTextLeon .introTextSubheading p{
    text-align: right;
    align-self: flex-end;
}

.zitatSection{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem 0 2rem 0;
    width: 100%;
}

.zitat{
    font-family: 'Social_Zitat';
    font-size: 2.8rem;
    color: white;
    text-align: left;
    max-width: 40rem;
    line-height: 1.2;
}

@keyframes arrow-bounce{
    0%   { transform: translateY(0); }
    50%  { transform: translateY(6px); }
    100% { transform: translateY(0); }
}

@media (max-width: 499px){

    .introHeading h1{
        font-size: 2.3rem;
        word-spacing: -0.5rem;
        letter-spacing: 0;
        margin: 0;
    }

    .introTextSubheading{
        margin-top: 0.2rem;
        max-width: 18rem;
    }

    .introTextSubheading p{
        font-size: 1rem;
        line-height: 1.2rem;
    }

    .scrollButtonContainer{
        margin: 0;
    }

    .introTextStartButton{
        transform: scale(0.6);
        padding: 0;

    }

    .introTextStartButton .arrow-svg{
        width: 28px;
        height: 28px;
    }

    .heading p{
        line-height: 3rem;
    }

    .text p{
        line-height: 1.55rem;
        font-size: 1.2rem;
    }

    .videoDescription{
        font-size: 1rem;
        font-weight: 200;
    }

    .bildDescription{
        font-size: 1rem;
        font-weight: 200;
    }

    .zitatSection{
        margin: 0.5rem 0 0.5rem 0;
    }

    .zitat{
        font-size: 2.25rem;
    }

    .textBild{
        flex-direction: column;
        gap: 2rem;
        width: 100%;
        max-width: 100%;
        margin: 2rem 0 1rem 0;
    }

    .textBildText{
        max-width: 100%;
        line-height: 1.55rem;
        font-size: 1.2rem;
    }

    .zitatSmall{
        font-size: 2.25rem;
        line-height: 2.8rem;
    }

    .bildTextRechts{
        max-width: 100%;
    }

    .wrapper{
        flex-direction: column;
        height: 100vh;
    }

    .seiteVater, .seiteSohn {
        width: 100vw;
        height: 50vh;
        transition: height 0.45s ease;
        overflow: hidden;
    }

    .seiteVater{
        border-right: none;
        border-bottom: 1px solid #333;
    }

    .seiteSohn{
        border-left: none;
        border-top: 1px solid #333;
    }

    .seiteVater.collapsed, .seiteSohn.collapsed {
        height: 4rem;
        width: 100vw;
    }

    .seiteVater.expanded, .seiteSohn.expanded {
        height: calc(100vh - 4rem);
        width: 100vw;
    }

    .tabSohn, .tabVater {
        top: auto;
        bottom: -2.25rem;
        left: 50%;
        transform: translateX(-50%);
        transform-origin: center;
        display: none;
        width: 9rem;
        height: 3rem;
        border-radius: 0.25rem;
    }

    .introPic {
        height: 50vh;
    }

    .absatz1 {
        padding: 0 1rem;
        font-size: 1.1rem;
    }


    .seiteVater .tabVater {
        right: 0;
        border-radius: 0.25rem;
        transform: translateX(-50%) translateY(-60%) rotate(0deg);
    }

    .seiteSohn .tabSohn  {
        left: 0;
        border-radius: 0.25rem;
        transform: translateX(120%) translateY(-120%) rotate(0deg);
    }
}

.seiteVater.collapsed:hover .introPic,
.seiteSohn.collapsed:hover .introPic {
    opacity: 0.35;
    transition: opacity 0.5s;
}

.seiteVater.collapsed .introPic:hover .introTextFredi,
.seiteSohn.collapsed .introPic:hover .introTextLeon,
.seiteVater.collapsed:hover .introTextFredi,
.seiteSohn.collapsed:hover .introTextLeon{
    opacity: 0;
    pointer-events: none;
}