/* SCHRIFTEN */

	::-moz-selection { background: rgba(57, 100, 109, 0.5); }
	::selection { background: rgba(57, 100, 109, 0.5); }

@font-face {
    font-family: Vorkurs;
    src: url(../fonts/Vorkurs-Medium.woff);}
@font-face {
    font-family: Vorkurs;
    src: url(../fonts/Vorkurs-Bold.woff);
    font-weight: 600;}
@font-face {
    font-family: Vorkurs;
    src: url(../fonts/Vorkurs-Light.woff);
    font-weight: 200;}

    body {
        overflow-x: hidden;
    }

/* VARIABLEN */
:root {
	--blau-hell: #b6c7cb;
    --blau-medium: #3b6c76;
    --blau-dunkel: #292a34;
    --gruen: #b3b598;
	--gelb: #fbd142;
    --weiss: #ffffff;
    --schwarz: #000000;
    --margin-left: 16%;}

/* ALLGEMEIN */
body {
    font-family: Vorkurs;
    font-weight: 400;
    background-color: var(--blau-dunkel);
    color: var(--blau-dunkel);
    margin: 0 auto;
}

body, main, section {
    max-width: 100%;
}

a {
    transition: all 300ms;}
.image {
    line-height: 0;}
.bold {
    font-weight: 600;}
.light {
    font-weight: 200;}
.double-slash {
    font-size: 20px;}
h2 {
    font-size: 120px;
    font-weight: 600;}
h3 {
    font-size: 40px;}
ul {
    list-style-type: disc;
    margin: 30px 0 30px 30px;}
.pointer {
    cursor: pointer;}
.gelb {
    color: var(--gelb);}
.weiss {
    color: var(--weiss);}
.container {
    width: 1920px;
    max-width: 100%;
    margin: 0 auto;}
.inner {
    width: 1640px;
    max-width: 92%;
    margin: 0 auto;}
.info {
    font-size: 16px;}
.info-large  {
    font-size: 40px;
    line-height: 1.5em;}
.margin-left {
    margin-left: var(--margin-left);}
.fadein-left {
    -webkit-transform: translateX(-80px);
    transform: translateX(-80px);
    opacity: 0;
    transition: all 800ms ease-in-out;}
.fadein-right {
    -webkit-transform: translateX(80px);
    transform: translateX(80px);
    opacity: 0;
    transition: all 800ms ease-in-out;}
.fadein-top {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    opacity: 0;
    transition: all 800ms ease-in-out;}    
.fadein-bottom {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0;
    transition: all 800ms ease-in-out;}
.animated {
    -webkit-transform: translate(0);
    transform: translate(0);
    opacity: 1;}

/* HEADER */
header {
    position: relative;
    font-size: 20px;
    font-weight: 600;
    color: var(--gelb);
    background-color: var(--blau-dunkel);}
header .container {
    height: 100vh;
    min-height: 600px;}
.nav {
    position: relative;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 38px;}
#menu {
    display: flex;
    margin-bottom: 50px;}
.termin a {
    color: var(--weiss);
    background-color: var(--blau-medium);
    font-weight: 400;
    padding: 6px 8px;
    margin-left: 10px;
}
.app a {
    color: var(--blau-dunkel);
    background-color: var(--gelb);
    font-weight: 600;
    padding: 6px 8px;
    margin-left: 10px;}

/* MISSION */
#mission {
    background-color: var(--blau-dunkel);}
#mission .inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;}
#mission .studio-goldhammer {
    position: absolute;
    bottom: 20vw;}
#mission .statement {
    position: absolute;
    left: var(--margin-left);
    bottom: 70px;
}
#mission .background-image {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 100;
}
#mission .background-image img {
    max-width: inherit;
}

@media (max-width: 768px) {
    header .container {
        height: auto;
    }

    body, main, section {
        overflow-x: hidden;
    }
    #mission .background-image {
        position: relative; /* Change positioning on smaller screens */
        right: 0;
        bottom: 0;
    }
    #mission .background-image img {
        width: 100vw;  /* Ensure the image scales to fit the viewport */
        object-fit: cover;
    }
}

/* HEADER SPACER */
#header-spacer {
    background-color: var(--blau-dunkel);
    width: 100%;
    height: 125px;}

/* PHYSIOTHERAPIE */
#physiotherapie {
    padding: calc(50px + 3.5vw) 0 calc(50px + 6.8vw);
    background-color: var(--weiss);
}

#physiotherapie h2 {
    margin: calc(15px + 1vw) auto calc(25px + 1vw);
}

#physiotherapie .info-large {
    width: 80%;
    margin-bottom: 9vw;
}

.physiotherapie,
.training {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.physiotherapie .left,
.training .left,
.physiotherapie .right,
.training .right {
    flex: 1 1 100%; 
    margin: 0;
    text-align: left; 
}

.physiotherapie .right,
.training .right {
    margin-top: 30px;
}

.physiotherapie .info,
.training .info {
    width: 100%; 
    margin-top: 20px;
    line-height: 1.8em;
}

/* Media Queries */
@media (min-width: 768px) {
    .team-row-1 {
        margin-bottom: -80px !important;
    }

    .physiotherapie .left {
        flex: 0 1 auto;
    }

    .physiotherapie .right {
        margin: 190px 0 0 60px;
        flex: 1 1 auto;
    }

    .training {
        margin-top: -70px;
    }

    .training .left {
        margin: 190px 60px 0 0;
        text-align: right;
        flex: 0 1 auto;
    }

    .training .right {
        flex: 0 1 auto;
    }

    .physiotherapie .info,
    .training .info {
        width: 484px;
    }
}

@media (max-width: 767px) {
    .team-first-row {
        padding-top: 50px !important;
    }

    .hide-mobile {
        display: none;
    }

    .physiotherapie,
    .training {
        flex-direction: column;
        align-items: center;
    }

    .physiotherapie .left,
    .training .right {
        order: 1; /* Place images after the text */
    }

    .physiotherapie .right,
    .training .left {
        order: 2; /* Place the text first */
    }
}


/* HILFE */
#hilfe {
    position: relative;
    background-color: var(--gelb);
    padding-bottom: 120px;}
#hilfe .images {
    display: flex;}
#hilfe .images .right {
    background-color: var(--weiss);}
#hilfe .image2 {
    max-width: 60%;}
#hilfe .overlay {
    position: absolute;
    top: 26vw;
    left: 0;}
#hilfe .overlay img {
    width: 100%;}
#hilfe .inner {
    margin-top: calc(70px + 8vw);}
#hilfe h2 {
    margin: calc(15px + 1vw) auto calc(25px + 1vw);}

/* TEAM */
#team {
    background-color: var(--weiss);
    padding-top: 50px;
}
#current-team-wrapper {
    display: none;}
#team .container {
    display: flex;
    justify-content: space-between;}
#team .container {
  overflow-x: hidden;
  max-width: 100%;
}
#team .container > div {
     margin-bottom: 10px;
    flex: 0 0 calc(33.3% - 10px);}
.team1 {
    margin-top: -90px;
    padding-bottom: 100px;
}
.team2 {
    margin-top: -180px;
    padding-bottom: 100px;
}
.team3 {
    /* margin-top: 30px; */
    padding-bottom: 100px;
}
#team .image {
    position: relative;}
#team .image .image-colored {
    display: none;
    position: absolute;
    top: 0;
    left: 0;}
#team .image img {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;}
#team .name {
    font-size: 40px;
    font-weight: 200;
    margin-top: 81px;
	margin-left: 10%;}
#team .funktion {
    margin: 25px auto 0;
    font-weight: 600;
    color: var(--gelb);
	margin-left: 10%;}
#team .funktion2 {
    margin: 25px auto 0;
    font-weight: 600;
    color: var(--blau-medium);
	margin-left: 10%;}
#team .more {
    display: inline-block;
    margin-top: 38px;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
    /* padding-bottom: 100px; */
	margin-left: 10%;}
#team .more:hover {
    text-decoration: none;}
.more-info {
    display: none;
    line-height: 1.8em;}
.more-info .headline {
    margin-top: 38px;
	margin-left: 5%;}
.more-info .flex {
    display: flex;}
.more-info .flex .date {
    flex: 0 0 85px;
	margin-left: 5%;}

    @media (max-width: 768px) {
        #team {
            padding-top: 0px;
            overflow-y: hidden;
        }
        .team1, .team2, .team3 {
            padding-bottom: 30px !important;
        }
        #hilfe {
            padding-bottom: 100px;
        }
        #team .container {
            flex-direction: column;
            align-items: center;
        }
        
        #team .container > div {
            flex: 1 0 100%;
        }
    
        #team .team1,
        #team .team2 {
            margin-top: 0;
        }
    
        #team .name {
            font-size: 28px; 
        }
    
        #team .funktion {
            font-size: 16px;
        }

        #team .more {
            padding-bottom: 0px;
        }
    }

/* KONTAKT */
#kontakt {
    color: var(--weiss);
    font-size: 20px;
    background-color: var(--blau-dunkel);
    padding-top: calc(90px + 3vw);
}

#kontakt .image {
    max-width: 57%;
}

#kontakt h2 {
    margin: 0 50px 0 36%;
    position: relative;
    z-index: 200;
}

#kontakt h2.mobil {
    display: none;
}

#kontakt .flex {
    display: flex;
    margin-top: -70px;
}

#kontakt .infos {
    margin: 175px 50px 0;
    flex: 1 0 auto;
}

#kontakt .name {
    font-size: 40px;
    font-weight: 200;
    margin: 40px auto;
}

#kontakt .funktion {
    font-weight: 600;
    color: var(--gelb);
    margin: 25px auto 75px;
}

#kontakt .adresse {
    line-height: 1.6em;
}

#kontakt .adresse .bold {
    margin-top: 25px;
}

#kontakt .adresse .spacer {
    height: 25px;
}

#kontakt a:hover {
    color: var(--gelb);
}

/* @media (max-width: 767px) {
    #kontakt h2 {
        margin: 40px auto;
        position: relative;
        z-index: 200;
    }
} */

/* @media (max-width: 767px) {
    #kontakt h2 {
        margin: 0;
        position: relative;
        z-index: 200;
    }

    #kontakt {
        padding-top: 50px;
    }

    #kontakt .flex {
        display: block; 
        margin-top: 0;
    }

    #kontakt h2.desktop {
        display: none; 
    }

    #kontakt h2.mobil {
        display: block;
        text-align: center;
        font-size: 24px; 
        margin-bottom: 20px;
    }

    #kontakt .image {
        max-width: 100%; 
        margin-bottom: 20px;
    }

    #kontakt .infos {
        margin: 20px 0;
        text-align: center; 
    }

    #kontakt .name {
        font-size: 30px; 
        margin: 20px 0;
    }

    #kontakt .funktion {
        margin: 15px 0 50px; 
    }

    #kontakt .adresse {
        font-size: 16px; 
        line-height: 1.4em;
    }

    #kontakt .adresse .bold {
        margin-top: 15px;
    }

    #kontakt .adresse .spacer {
        height: 15px; 
    }
} */


/* IMPRESSUM DATENSCHUTZ */
#impressum {
    color: var(--weiss);
    line-height: 1.6em;}
#impressum .inner > div {
    max-width: 80%;}
#impressum p {
    margin: 0 0 30px 0;}

/* FOOTER */
footer {
    margin: calc(100px + 5vw) auto 70px;
    font-weight: 200;
    font-size: 14px;
    color: var(--weiss);
    background-color: var(--blau-dunkel);}
footer .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;}
#footer-menu {
    margin-bottom: 6px;}


@media screen and (max-width: 1920px) {
    h2 {
        font-size: calc(6px + 6vw);}
    .double-slash {
        font-size: calc(15px + 0.3vw);
        margin-right:40px;
    }
    .info-large {
        font-size: 2vw;}
    /* PHYSIOTHERAPIE */
    .physiotherapie .right {
        margin-top: 5vw;}
    /* HILFE */
    #hilfe .overlay {
        width: 62vw;}
    /* TEAM */
    #team .name {
        font-size: calc(20px + 1.2vw);
        margin-top: calc(15px + 4vw);}
    /* KONTAKT */
    #kontakt .name {
        font-size: calc(20px + 1.2vw);}
}
@media screen and (max-width: 1200px) {
    /* PHYSIOTHERAPIE */
    .physiotherapie .right {
        margin-top: 2vw;}
}
@media screen and (max-width: 1024px) {
    .nav {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;}
    #menu {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 20px 0 10px;}
    #header-spacer {
        height: 0;}
    /* PHYSIOTHERAPIE */
    .training {
        margin-top: 40px;}
    .training .left {
        margin-top: 2vw;}
    /* IMPRESSUM */
    #impressum .inner {
        margin-top: 10vw;}
}
@media screen and (max-width: 768px) {
    :root {
        --margin-left: 5%;}
    .info-large {
        font-size: 18px;}
    h3 {
        font-size: calc(15px + 3vw);;}
    #menu {
        flex-direction: column;}
    #menu .termin {
        margin: 20px 0;}
    .termin a {
        margin-left: 0;}
    /* HEADER */
    header .inner {
        /* padding-left: var(--margin-left); */
    /* PHYSIOTHERAPIE */
    .physiotherapie {
        flex-direction: column;}
    .training {
        flex-direction: column-reverse;}
    .physiotherapie .right,
    .training .left {
        text-align: left;
        margin: 30px 0 0 var(--margin-left);}
    .physiotherapie .info,
    .training .info {
        width: auto;}
    /* HILFE */
    #hilfe {
        padding-bottom: 320px;}
    /* TEAM */
    #current-team-wrapper {
        display: block;
        font-weight: 200;}
    #current-team-wrapper > div {
        float: left;
        margin: 0 20px 20px 0;
        opacity: 0.4;
        transition: all 300ms;}
    #current-team-wrapper > div:hover,
    #current-team-wrapper > div.current-wrapper-active {
        cursor: pointer;
        opacity: 1;}
    .team1,
    .team2 {
        margin-top: 0;}
    #team .inner {
        display: block;
        height: auto;
        width: 100%;
        overflow: hidden;
        position: relative;
        margin-top: -230px;}
    #team .container {
        display: block;
        padding: 0;
        margin: 0;
        width: 10000px;
        max-width: initial;
        clear: both;}
    #team .wrapper {
        float: left;
        margin: 0 20px 0 0;
        padding: 0;
        width: calc(100vw - 80px);
        height: auto;}
    /* KONTAKT */
    #kontakt {
        font-size: 18px;}
    #kontakt h2 {
        margin: -11vw 0 0 0;}
    #kontakt h2.desktop {
        display: none;}
    #kontakt h2.mobil {
        display: block;}
    #kontakt .flex {
        display: block;
        margin-top: 0;}
    #kontakt .infos {
        margin: 0 5% 0 calc(4% + var(--margin-left));}
}
@media screen and (max-width: 600px) {
    footer .inner {
        display: block;
        margin-left: calc(4% + var(--margin-left));
        width: auto;}
    footer #footer-menu {
        margin-top: 15px;}
    footer #footer-logo {
        margin-right: 5%;}
}

@media screen and (max-width: 768px) {
    #menu {
        flex-direction: column; /* Change flex direction to vertical */
        justify-content: space-around;
    }

    #menu .termin,
    #menu .app {
        display: inline-block; /* Display each element as an inline block */
        margin-top: 10px; /* Add some margin between the elements */
        font-size: 15px;
    }

    .double-slash {
        margin-bottom: 10px;
        margin-right: 0px;
    }

    .app a {
        margin-left: 0px !important;
    }
}
}