/* MARK:General
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --accentcolor1: rgb(255, 255, 255);
    --accentcolor2: rgb(233, 103, 43);
    --accentcolor3: black;
    --accentcolor4: rgb(0, 0, 0);
    --accentcolor5: Gray;
    --accentcolor6: lightgray;
}



/* body {
    font-family: "Poppins", sans-serif;
}
body.open {
    height: 100svh;
    overflow: hidden;
} */
body.noScrollbarBlinkWebKit::-webkit-scrollbar {
    display: none;
}

html {
    position: relative;
    width: 100%;
    overflow-y: scroll;
    overscroll-behavior: none;
    /* scrollbar-width: 0; */
}
html.disableScroll {
    overflow: hidden;
    background-color: WhiteSmoke;
}

/* MARK:Lenis
*/
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* Scrollbar */

body::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
    width: 0;  /* Remove scrollbar space */
    background: transparent;
}
html::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
    width: 0;  /* Remove scrollbar space */
    background: transparent;
}
*::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
    width: 0;  /* Remove scrollbar space */
    background: transparent;
}
::-webkit-scrollbar {
    display: none;
    appearance: none;
}


/* MARK:Sections
*/

section {
    display: block;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    cursor: default;
    /* height: 106svh; */
    width: 100vw;

    font-family: inherit;
    
}

.--mobile {
    display: none;
    height: 106svh;
    font-family: "Poppins", sans-serif;
    background-color: white;
}

.--desktop {
    display: block;
}

/* MARK: Switch Language
*/

.--english {
    display: none;
}
.--german {
    display: block;
}


/* MARK:Headlines & Texte
*/

.--mobile h1 {
    text-transform: uppercase;
    font-size: clamp(48px, 4rem, 80px);
    font-weight: 400;
    color: var(--accentcolor4);
    font-family: 'Bebas Neue 1';
}

h2 ,p ,button {
    font-family: inherit;
}


.themenSeite {
    height: 100dvh;
}

.themenSeite .line {
    overflow: hidden;
}


.themenSeite .wrapper, .messebau-2 {
    display: grid;
    height: 100dvh;
    grid-template-rows: 30vh 9vh auto 12vh;
    grid-template-columns: 100vw;
    justify-items: center;
    align-items: center;
}

.header-h1 {
    grid-area: 1 / 1 / 2 / 2;
    /* text-align: center; */
    height: 30vh;
    width: 100vw;
    /* opacity: 0; */
    visibility: visible;
    background-repeat: no-repeat;
    background-size: 100% 33vh;
    display: grid;
    justify-items: center;
}
.header-h1.open {
    visibility: hidden;
}

.header-h1 img {
    width: 100vw;
    height: 100%;
    image-rendering: optimizeQuality;
    overflow: hidden;
    aspect-ratio: auto;
}

.themenSeite h1 {
    /* color: white; */
    overflow: hidden;
    height: 12vh;
    /* width: max-content; */
    grid-area: 1 / 1 / 2 / 2;
    /* opacity: 0; */
    z-index: 2;
}

.themenSeite h2 {
    visibility: visible;
    grid-row: 2/3;
    translate: 0 6px;
    color: var(--accentcolor4);

    font-size: 1.75rem;
}

.themenSeite .text-paragraphs {
    display: block;
    grid-row: 3/4;
    height: 100%;
    overflow: hidden;
    /* scroll-snap-type: y mandatory; */
    visibility: visible;
    width: 84vw;
    margin-bottom: 0.5vh;
}

.text-paragraphs p {
    font-size: 0.9rem;
    /* scroll-snap-align: start; */
    text-align: justify;
    text-justify: inter-word;
    font-weight: 500;
    /* translate: 0 100px; */
}


/* MARK:MobileNav
*/

.nav {
    height: 10svh;
    /* z-index: 9999; */
    color: var(--accentcolor4);
    grid-area: 1 / 1 / 2 / 2;
    display: inline-block;
    padding-left: 7.5vw;
    padding-right: 7.5vw;
}

.nav-language {
    justify-self: start;
}
.nav-language.open {
    display: none;
}

.nav-language ul {
    position: relative;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: auto auto;
    grid-column-gap: .3rem;
    align-items: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.88;
    font-weight: 200;
    font-size: .9rem;
}

.nav-language ul img {
    width: 6.7vw;
    aspect-ratio: 1;
    object-fit: contain;

}

.language-menue {
    display: none;;
}
.language-menue.open-lang {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 48vh);
    grid-row-gap: 4vh;
    width: fit-content;
    /* justify-items: center; */
    height: 100vh;
}

.nav-language .exit-btn {
    display: none;
    transform: scale(1);
    transform-origin: left center;
    
}
.nav-language .exit-btn.open-lang {
    display: block;
    transform: scale(1.5);
    transition: transform 1s ease-in-out;
    /* transition-delay: 200ms; */

}

.nav-language .lang-btn {
    display: block;
}
.nav-language .lang-btn.open-lang {
    display: none;
}

.language-menue button {
    width: 14rem;
    grid-area: 1/1/2/2;
    height: fit-content;
    align-self: end;
    justify-self: center;
    transition: 100ms background ease-in-out;
}
.language-menue button:last-of-type {
    grid-area: 2/1/3/2;
    align-self: start;
}

.language-menue .button-de {
    background: var(--accentcolor4) none repeat scroll 0% 0% / auto border-box;
    color: rgb(255, 255, 255);
}
.language-menue .button-de.--en {
    display: block;
    background: rgb(233, 233, 234) none repeat scroll 0% 0% / auto border-box;
    color: var(--accentcolor4);
}
.language-menue .button-en {
    background: rgb(233, 233, 234) none repeat scroll 0% 0% / auto border-box;
    color: var(--accentcolor4);
}
.language-menue .button-en.--en {
    display: block;
    background: var(--accentcolor4) none repeat scroll 0% 0% / auto border-box;
    color: rgb(255, 255, 255);
}


/* MARK: Kontaktseite 
*/

.nav-contact {
    justify-self: end;
}
.nav-contact.open-lang {
    display: none;
}

.nav-contact img {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 6.6vw;
    opacity: 0.88;
}

.contact-menue {
    width: 100%;
    display: none;

    background-color: white;
}
.contact-menue.open {
    display: block;
    position: relative;
    top: 15vh;
    height: 100vh;
    /* translate: 0 -2vh; */
}
.contact-menue:first-child {
    text-decoration: none;
}

.contact-menue li {
    /* display: block; */
    text-align: center;
    list-style: none;
}

.contact-menue a {
    display: block;
    padding: 8px;
    padding-bottom: 0;
    text-align: center;
    color: black;
    opacity: 0.78;
}

.contact-menue .socials a {
    display: inline;
}

.contact-menue h4 {
    color: var(--accentcolor4);
    font-size: 1.75rem;
    font-weight: 600;
}

/* horizontal line */
.contact-menue hr {
    translate: 0 -0.4vh;
    width: 82%;
    margin: auto;
    background-color: var(--accentcolor4);
    height: 1px;
    border: none;
}

.contact-menue h5 {
    padding-top: 1.1vh;
    padding-bottom: 1.1vh;
    font-size: 1rem;
    font-weight: 700;
}

.contact-menue > .menu-spacer {
    height: 2vh;
}

.contact-menue button {
    background: rgba(233, 233, 234, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    font-weight: 500;
    width: 82%;
    border-image: none;
    border-style: solid;
    box-sizing: border-box;
    /* background: rgb(233, 233, 234) none repeat scroll 0% 0% / auto border-box; */
    color: var(--accentcolor4);
}

.contact-menue .socials img {
    padding-top: 1.8vh;
    padding-left: 3vw;
    padding-right: 3vw;
    height: 3.8vh;
}




/* MARK:Startseite
*/

#startseite {
    height: 100svh;
    display: grid;
    grid-template-rows: 1fr calc(85vw * 1.4) 1fr;
    grid-template-columns: 100vw;
    justify-items: center;
    align-items: center;
}

.logo_big {
    height: 100%;
    width: 85vw;
    display: grid;
    grid-template-rows: 74% 8% 8% 10%;
    /* justify-items: center;
    align-items: center; */
    background-color: black;
}
.logo_big.open {
    display: none;
}

.logo_big img, .logo_big h1, .logo_big h2 {
    justify-self: center;
    align-self: center;
    animation-play-state: inherit;
}

.logo_big div {
    display: grid;
    height: 100%;
    width: 85vw;
}

.logo_big img {
    height: calc(85vw * 1.4 * .74 * .8);
    /* width: 80%; */
    object-position: center;
    object-fit: cover;
}

.logo_big h1, .logo_big h2 {
    font-family: "Iceland";
    font-size: 8vw;
    font-style: normal;
    font-weight: 800;
    color: white;
    /* iOS Fix */
    -webkit-text-size-adjust: 100%;
}

.logo_big h2 {
    font-size: calc(8vw / 1.36);
    font-weight: 200;
    white-space: pre;
}

#startseite > .sign_scroll_top {
    visibility: initial;
    text-align: center;
}
.sign_scroll_top.open {
    display: none;
}

#startseite > .sign_scroll_top > .sign_scroll_bottom {
    opacity: 1;
}

#startseite > .sign_scroll_top h5 {
    position: relative;
    font-weight: 600;
    font-size: .9rem;
    color: var(--accentcolor4);
    font-weight: 400;
    opacity: 1;
}

#startseite > .sign_scroll_top .sign_container {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 2.6svh;
    width: 2.6svh;;
    display: grid;
    grid-template-columns: 2.6svh;
    grid-template-rows: 2.6svh;
}
#startseite > .sign_scroll_top img {
    margin-top: 0.6vh;
    transform-origin: center;
    transform: scale(2.4);
    opacity: 0.88;
    grid-area: 1 / 1 / 2 / 2;
}




/* MARK:Projekte
*/

.projekte {
    display: grid;
    /* display: none; */
    grid-template-rows: 24svh 76svh 6svh;
    animation-play-state: inherit;
}

.projekte > .header {
    /* display: block; */
    height: fit-content;
    align-self:center
}

.projekte > .header > h1 {
    font-size: 18vw;
    line-height: 0.9;
    position: relative;
    top: 2vh;
    padding: 0 3vw 0 3vw;
    width: 94vw;
    text-align: end;
}

.projekte > .header > h1:first-of-type {
    transform: 0.6vh;
    text-align: start;
}

.projekte > .projekte__container {
    grid-row: 2/3;
    margin-left: 10px;
    /* width: 100%; */
    display: grid;
    grid-template-columns: repeat(4, 80vw);
    /* grid-auto-columns: 80vw; */

    overflow-x: scroll;
    scroll-snap-type: x mandatory;

    animation-play-state: inherit;
}

/* Projekt Bild 1 */
.projekte .item:first-of-type {
    background-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.5) 80%,
    rgba(0,0,0,1) 100%),
    url("/assets/images/project_3.jpg");
}
/* Projekt Bild 2 */
.projekte .item:nth-of-type(2) {
    background-image: linear-gradient(to top,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.5) 80%,
    rgba(0,0,0,1) 100%),
    url('/assets/images/project_2.jpg');
}
/* Projekt Bild 3 */
.projekte .item:nth-of-type(3) {
    background-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.5) 80%,
    rgba(0,0,0,1) 100%),
    url('/assets/images/project_5.jpg');
}
/* Projekt Bild 4 */
/* .projekte .item:nth-of-type(4) {
    background-image: url('/assets/images/project_4.jpg');
} */

.item {
    display: grid;
    align-items: center;
    justify-items: center;

    border: 4px solid white;
    border-radius: 24px;
    margin: 4px;
    height: calc(100% - 16px);
    width: calc(100% - 16px);

    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-size: cover;
}

.projekte .card-heading {
    display: grid;
    grid-template-columns: 20% 80%;
    color: white;
    align-self: flex-end;
    padding-bottom: 14%;
}

.projekte #aachen {
    align-self: flex-start;
    padding-top: 14%;
}

.projekte #aachen h2 {
    padding-left: 14px;
}

.projekte svg {
    bottom: 0;
    height: 40px;
}

.projekte svg path {
    fill: var(--accentcolor6);
}

.projekte h2 {
    translate: 0 8px;
    padding-left: 10px;
    font-weight: 200;
    font-family: 'Bebas Neue 1';
    font-size: 3.7vh;
    color: var(--accentcolor6);
}


/* MARK:Messebau
*/

.messebau-1 {
    height: 100vh;
    display: grid;
    width: 100vw;
    grid-template-rows: repeat(3, 30vh);
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.messebau-1 h1 {
    color: black;
    width: max-content;
    --after-opacity: 0;
    font-size: 4rem;
    transform-origin: bottom;
    /* transform: scale(1); */
}
.messebau-1 h1.--german {
    font-size: 5rem;
    /* text-size-adjust: ; */
}

.messebau-1 h1::after {
    position: absolute;
    content: '';
    top: 17.8%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    height: 4rem;
    background-image: url('data:image/svg+xml,<svg width="162" height="17" viewBox="0 0 162 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 11.0693L21 1.06934L21.0347 11L41.0347 1V11.0693L61.0347 1.06934V11.0693L81.0347 1.06934V11.0693L101.035 1.06934V11.0693L121.035 1.06934V11.0693L141.035 1.06934V11.0693L161.035 1.06934" stroke="rgb(148,214,105)" stroke-width="3px" stroke-linejoin="bevel"/><path d="M1 16.0693L21 6.06934L21.0347 16L41.0347 6V16.0693L61.0347 6.06934V16.0693L81.0347 6.06934V16.0693L101.035 6.06934V16.0693L121.035 6.06934V16.0693L141.035 6.06934V16.0693L161.035 6.06934" stroke="rgb(99,156,59)" stroke-width="3px" stroke-linejoin="bevel"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21rem;
    /* opacity: 0.4; */
    opacity: var(--after-opacity);
    /* transform-origin: top center; */
    z-index: -1;
}

.messebau-1 h2 {
    width: 85vw;
    font-size: 1.75rem;
    line-height: 1.1;
}

.messebau-1 div {
    /* height: 30vh; */
    /* grid-row: 2/3;
    grid-column: 1/2; */
    grid-area: 2/1/3/2;
}

.messebau-1 div h2 {
    display: inline;
    color: rgba(0,0,0,0.8)
}

.messebau-1 .h2-end {
    grid-row: 3/4;
    font-size: 2.1rem;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
    width: 80vw;
}

.messebau-1 .truck, .messebau-1 .truck2 {
    z-index: 2;
    /* padding-left: 5vw; */
    padding: 5vw;
    padding-bottom: 0;
    width: 10vw;
}
.messebau-1 .truck {
    grid-area: 1/1/2/2;
    justify-self: start;
    align-self: end;
}
.messebau-1 .truck2 {
    grid-area: 2/1/3/2;
    justify-self: end;
    align-self: end;
    transform: scaleX(-1);
}

#messebau-2 h1 {
    color: white;
}


/* MARK:Anfrage
*/

.BTN-anfrage {
    justify-self: center;
    align-self: center;
    grid-row: 4/5;
    height: 5.5vh;
    width: 80vw;
    font-size: clamp(2.2vh, 2.6vh, 3vh);
    font-weight: 400;
    cursor: pointer;
    background: rgba(233, 233, 234, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    color: var(--accentcolor4);
    text-align: center;
    border: 1px solid var(--accentcolor4);
    border-color: var(--accentcolor4);
    border-radius: 5px;
    padding: 0 1rem;
}

.BTN-anfrage > img {
    translate: -1.5vw 2px;
    width: 5.3vw;
    display: none;
}

#messebau-anfrage .eingabe {
    display: block;
    width: 100%;
    text-align: center;
    visibility: hidden;
}
.eingabeK {
    display: block;
    width: 100%;
    text-align: center;
    visibility: hidden;
}
.eingabeK.open, #messebau-anfrage .eingabe.open {
    position: fixed;
    /* max-height: fit-content; */
    height: 150vh;
    top: 0vh;
    width: 100vw;
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
    background-color: rgb(236, 236, 236);
    visibility: inherit;
    z-index: 2;
}

/* MARK: Formular
 */

.--mobile form {
    height: calc(100dvh - 0.7em);
    overflow: hidden;
    display: grid;
    justify-items: center;
    align-items: center;
    
    row-gap: 0.7em;
    /* background-color: var(--accentcolor6); */
    background-color: rgb(236, 236, 236);
    padding-bottom: 0.7em;
    visibility: inherit;
}

.--mobile #formM {
    grid-template-rows: auto auto auto auto auto auto 2fr auto;
}

.--mobile #formK {
    grid-template-rows: auto auto auto auto auto 2fr auto;
}


.--mobile input, .--mobile textarea {
    width: 94vw;
    text-align: center;
    font-family: inherit;
    font-size: 1rem;
    background-color: white;
    border-radius: 5px;
    border-width: 0px;
    /* margin: 7px; */
}
.--mobile input::placeholder {
    color: var(--accentcolor5);
}

.--mobile textarea {
    text-align: left;
    padding: 12px 20px;
    height: calc(100% - 24px);
    width: calc(94vw - 40px);
    overflow: scroll;
}
.--mobile textarea::placeholder {
    text-align: center;
    font-size: 1rem;
    position: relative;
    top: -12px;
    color: var(--accentcolor5);
}


.--mobile form > h2 {
    margin-top: 1rem;
    margin-bottom: .8rem;

    font-family: 'Bebas Neue 1';
    font-weight: 200;
    font-size: 2.75rem;
    color: black;

    grid-area: 1 / 1 / 2 / 2;
    visibility: inherit;
}

.--mobile form > h2.--english {
    font-size: 2.5rem;
}

.--mobile form > h2 > i {
    color: var(--accentcolor4);
}

.--mobile form ul {
    width: 80vw;
    height: 7vh;
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

.--mobile form button {
    font-size: 1.25rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%);

    height: 5.5vh;
    width: calc(40vw - 3px);
    border: 1px solid var(--accentcolor4);
    border-radius: 5px;
}

.--mobile form button:first-child {
    background: var(--accentcolor4) none repeat scroll 0% 0% / auto border-box;
    color: rgb(255, 255, 255);
    font-weight: 450;
}
.--mobile form button:last-child {
    background: rgb(233, 233, 234) none repeat scroll 0% 0% / auto border-box;
    color: var(--accentcolor4);
    font-weight: 450;
}

.--mobile .button-2 {
    font-size: 1.25rem;
    border: 1.5px solid var(--accentcolor4);
    border-radius: 5px;
    font-weight: 450;
}


/* MARK: Hintergrundbilder
*/

#kuechen .header-h1 {
    background-image: linear-gradient(to bottom,
    rgba(200,200,200,0.2) 4vh,
    rgba(200,200,200,0.3) 14vh,
    rgba(200,200,200,0.2) 24vh),
    url("/assets/images/kueche2_800.jpg");
}


/* MARK: Impressum
*/

.--mobile .imprint {
    color: black; 
    text-align: center;
}
.--mobile a:any-link {
    color: black;
    text-decoration: none;
}