/* GENERAL (STANDARD SMALL SCREEN) */
:root{
    --background-color: #edece7;
    --header-color: rgba(136, 168, 198, 0.8);
    --accent-color:#1b2b39;
    --container-color: rgba(255, 255, 255, 0.8);
    --text-color: #edece7;
    --navbar-height: 80px;
    --margin-standard: 2.5vw;
}
        html {
            /* langsames Scrollen */
            scroll-behavior: smooth;
            /* Anchor-Verschiebung wegen header */
            scroll-padding-top: 116px; 
        }
        body {
            font-family: 'Oswald', sans-serif;
            color: var(--accent-color);
            background-color: var(--background-color);
            background-image: url(images/background1.jpg);
            background-size: auto 100%;
            padding-left: var(--margin-standard);
            padding-right: var(--margin-standard);
            margin: 0 3vw;
        }
        header {
            background-color: var(--header-color);
            /* background: linear-gradient(rgb(13, 186, 255), rgb(6, 49, 66)); */
            height: var(--navbar-height);
            /* box-shadow: 0px 10px 13px -7px #000000, 2px 12px 18px 9px rgba(0,0,0,0); */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: var(--margin-standard);
            padding-right: var(--margin-standard);
            position:fixed; top: 0; left: 0; right: 0;
            z-index: 1000;
        }
        footer {
            background-color: var(--accent-color);
            position: absolute; left: 0; right: 0;
            height: clamp(50px, 5vw, 80px);
            padding-top: 10px;
        }
        a {
            color: rgb(0, 0, 0);
            text-decoration: none;
            font-weight: 600;
            font-size: clamp(12px, 1.3vw, 20px);
        }
        a:hover {
            color: var(--accent-color);
        }
        header .nav-item {
            color: var(--text-color);
            text-decoration: overline;
            display: block;
        }
        header a:hover {
            color: var(--accent-color);
        }
        footer a {
            color: var(--text-color);
            text-decoration: underline;
            margin-left: 5vw;
            font-weight: 400;
            font-size: clamp(14px, 2vw, 40px); 
        }
        footer a:hover {
            color: var(--header-color);
        }
        footer p {
            color: var(--text-color);
            font-size: clamp(14px, 2vw, 40px);
            font-weight: 200;
            margin: 0;
        }
        .row-footer {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

/* CONTAINER */
        .logo-container {
            z-index: 10000;
        }
        .image-container-start {
            background-color: var(--background-color);
            height: clamp(100px, 30vw, 300px);
            /* padding: clamp(12px, 2vw, 36px); */
            margin-bottom: var(--margin-standard);
            display:flex;
            justify-content:space-evenly;
            /* box-shadow: 0px 10px 13px -7px #000000, 2px 12px 18px 9px rgba(0,0,0,0); */
            /* border-radius: 12px; */
        }
        .image-container {
            /* background-color: var(--container-color); */
            display: none;
        }
        .image-container-mobile {
            /* background-color: var(--container-color); */
            /* padding: clamp(12px, 2vw, 36px); */
            margin-bottom: clamp(12px, 2vw, 36px);
            /* box-shadow: 0px 10px 13px -7px #000000, 2px 12px 18px 9px rgba(0,0,0,0); */
            /* border-radius: 12px; */
            /* align-items: center; */
            /* overflow: hidden; */
        }
        .text-container{
            background-color: var(--container-color);
            padding: clamp(12px, 2vw, 36px);
            margin-bottom: clamp(12px, 2vw, 36px);
            text-align: left;
            box-shadow: 0px 10px 13px -7px #000000, 2px 12px 18px 9px rgba(0,0,0,0);
            border-radius: 12px;
        }
        .text-container-small{
            background-color: var(--accent-color);
            color: var(--text-color);
            padding: clamp(12px, 2vw, 36px);
            text-align: center;
            box-shadow: 0px 10px 13px -7px #000000, 2px 12px 18px 9px rgba(0,0,0,0);
            border-radius: 12px;
            margin: var(--margin-standard) 18vw; 
        }
        .text-container-footer {
            background-color: none;
            text-align: center;
        }
/* NAVIGATION */

        nav{
            height:var(--navbar-height);
            background-color: var(--background-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        nav ul{
            position: absolute;
            top: var(--navbar-height);
            padding: auto;
            margin: 0;
            right: 0;
            left: 0;
            background-color: var(--header-color);
            z-index: 99;
            transform: translateX(100%);
            transition: .5s;         
        }   
        nav li{
            display: flex;
            justify-content: center;
            list-style: none;
            font-family: 'Oswald', sans-serif;
            padding: 1vw 0 1vw 0;
        }
        nav li:hover{
            color: var(--accent-color);
        }
        nav ul a{
            padding-top: 2vw;
        }
        .toggle_button{
        
            position: absolute;
            top: 25px;
            right: 25px;
            cursor: pointer;
        
            z-index: 100;
        }
        #toggle_button:checked ~ ul{
            display: block;
            transform: translateY(0%);
            transition: .5s;
        }
        .top-button {
            /* margin-top: 110vh; */
            margin: 3vw 38vw;
            position: sticky;
            bottom: 5vh;
            display: flex;        
            justify-content: center;
            z-index: 80;
        }
        .top-button img {
            height: clamp(40px, 6vw, 70px);
        }
/* IMAGES AND BUTTONS */
        .header-logo {
        /* height: clamp(120px, 10vw, 200px); */
        height: 95px;
        display: flex;
        justify-content: baseline;
        margin-top: 25px;
        }
        /* .header-logo-name {
            height: 120px;
            display: flex;
            justify-content: baseline;
            margin-top: 25px;
            z-index: 100;
        }    */
        .header-image {
        width: 32%;
        object-fit: cover;
        object-position: 50% 15%;
        display: inline-flex;
        /* border-radius: 12px; */
        }   
        .img-menu {
            height: 60px;
            z-index: 99;
        }
        .container-image {
            /* width: 100%; */
            object-fit: cover;
            object-position: 50% 50%;
            display: block;
            border-radius: 50%;
            height: clamp(120px, 20vw, 360px);
            width: clamp(120px, 20vw, 360px);
        }
        .container-image-mobile {
            width: 35vw;
            height: 35vw;
            /* object-fit: cover; */
            /* object-position: 50% 15%; */
            /* display: block; */
            border-radius: 50%;
        }
        .button {
            background-color: var(--accent-color);
            /* width: 50%; */
            color: var(--text-color);
            text-decoration: none;
            margin: 2vw 15vw 2vw 15vw;
            padding: 0.3vw;
            /* border: 1px solid rgb(36, 36, 36); */
            border-radius: 12px;
            display: flex;
            justify-content: center;
        }
        .button:hover {
            background-color: var(--header-color);
            color: white;
        }
        .button-alternative {
            background-color: var(--text-color);
            /* width: 50%; */
            color: var(--accent-color);
            text-decoration: none;
            margin: 2vw 10vw 2vw 10vw;
            padding: 0.3vw;
            /* border: 1px solid rgb(36, 36, 36); */
            border-radius: 12px;
            display: flex;
            justify-content: center;
        }
        .button-alternative:hover {
            background-color: var(--header-color);
            color: var(--text-color);
        }

/* LAYOUT */
        .borders {
            background-color: var(--accent-color);
            border: 0.5vw solid var(--background-color);
            outline: 0.25vw solid #1f1f1f;
            outline-offset: 0.25vw;
            padding: 0.5vw;
            position: relative;
            margin: 0 auto;
          }
        .left {
            display: flex;
            justify-content: start;
        }
        .center {
            display: flex;
            justify-content: center;
        }
        .right {
            display: flex;
            justify-content: end;
        }
        .space {
            margin-top: var(--margin-standard);
        }
        .space-below {
            margin-bottom: var(--margin-standard);
        }
        
/* FONTS */
        .headline {
            /* font-family: 'Dancing Script', cursive; */
            font-size: 45px;
            font-weight: 300; 
            color: var(--text-color);
            display: flex;
            justify-content: center;
            padding-top: 40px;
            margin: 0 17vw 0 2vw;
            overflow: hidden;
        }
        .subheadline {
            /* font-family: 'Dancing Script', cursive; */
            font-size: clamp(11px, 1.75vw, 22px);
            color: var(--text-color);
            display: flex;
            justify-content: baseline;
        }
        .nav-item {
            font-weight: 300;
            font-size: 20px;
            color: var(--text-color);
            display: flex;
            justify-content: end;
            /* margin-right: 10vw; */
        }
        h1 {
            font-size: clamp(24px, 2vw, 48px);
            font-weight: 600;
            text-align: center;
        }
        h2 {
            font-size: clamp(18px, 2vw, 36px);
            font-weight: 500;
            align-items: center;
            text-align: center;
        }
        h3 {
            font-size: clamp(12px, 1.5vw, 24px);
            font-weight: 400;
            align-items: center;
            text-align: center;
        }
        p {
            font-size: clamp(12px, 1.3vw, 20px);
            font-weight: 300;
        }
        .quote {
            font-size: clamp(12px, 1.3vw, 20px);
            font-weight: 400;
            text-align: center;
            font-style: italic;
        }

/* LARGE SCREEN */
@media (min-width: 960px) {
        #toggle_button:checked ~ ul{
            display: flex;
        }
        nav{
            height: 0;
        }
        nav ul{
            width: 100%;
            background: none;
            display: inline-flex;
            justify-content: end;
            position: static;
            list-style: none;
            transform: none;
            margin-right: 5vw;
        }
        nav ul a{
            padding: 0 2vw 0 0;
        }
        .nav-item {
            font-weight: 400;
            font-size: 28px;
            color: var(--text-color);
            display: flex;
            justify-content: end;
            margin-top: 55px;
            padding: 0 0 0 1.5vw;
        }
        .img-menu {
            display: none;
        }
        .left-half-40 {
            width: 40%;
            display: inline;
            justify-content: space-between;
            align-items: left;
        }
        .left-half-60 {
            width: 60%;
            display: inline;
            justify-content: flex-start;
            align-items: left;
        }
        .right-half-40 {
            width: 40%;
            display: inline;
            justify-content: space-between;
            align-items: right;
            margin-left: var(--margin-standard);
        }        
        .right-half-60 {
            width: 60%;
            display: inline;
            justify-content: space-between;
            align-items: right;
            margin-left: var(--margin-standard);
        }
        .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .image-container-mobile {
            display: none;
        }
        .image-container {
            /* background-color: white; */
            /* padding: clamp(12px, 2vw, 36px); */
            margin-bottom: clamp(12px, 2vw, 36px);
            display:flex;
            justify-content:space-evenly;
            /* box-shadow: 0px 10px 13px -7px #000000, 2px 12px 18px 9px rgba(0,0,0,0); */
            /* border-radius: 12px; */
        }
        .headline {
            font-size: 64px;
            color: var(--text-color);
            display: flex;
            justify-content: end;
            margin: -17px 0 0 0;
            overflow: hidden;
        }
        .header-logo {
            height: 105px;
            display: flex;
            justify-content: baseline;
            margin-top: 40px;
            margin-left: 5vw;
        }
        body {
            margin: 0 10vw;
        }
        .button {
            margin: 2vw 10vw 2vw 10vw;
        }
    }

/* VERY SMALL SCREEN */
@media (max-width: 370px) {
    .headline {
        font-size: 28px;
        color: var(--text-color);
        display: flex;
        justify-content: center;
        margin: 17px 15vw 0 0;
    }
    .header-logo {
        height: 80px;
        display: flex;
        justify-content: baseline;
        margin-top: 20px;
        margin-left: 1vw;
    }

}