/* playfair-display-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/playfair-display-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/playfair-display-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/playfair-display-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/playfair-display-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/playfair-display-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/playfair-display-v30-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
  }
  /* playfair-display-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/playfair-display-v30-latin-italic.eot'); /* IE9 Compat Modes */
    src: url('fonts/playfair-display-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/playfair-display-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/playfair-display-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
         url('fonts/playfair-display-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/playfair-display-v30-latin-italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
  }
  /* playfair-display-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/playfair-display-v30-latin-700.eot'); /* IE9 Compat Modes */
    src: url('fonts/playfair-display-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/playfair-display-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/playfair-display-v30-latin-700.woff') format('woff'), /* Modern Browsers */
         url('fonts/playfair-display-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/playfair-display-v30-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
  }


/* playfair-display-sc-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display SC';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/playfair-display-sc-v15-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/playfair-display-sc-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/playfair-display-sc-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/playfair-display-sc-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/playfair-display-sc-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/playfair-display-sc-v15-latin-regular.svg#PlayfairDisplaySC') format('svg'); /* Legacy iOS */
  }



:root{
  --black: black;
  --white: white;
  --border-width: 2px;
}


html {
    scroll-behavior: smooth;
}


.BasicGridContainer{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-auto-rows: minmax(3rem, auto);
    grid-auto-flow: row;
    gap: 20px;
    margin: 20px;
}



* {
    font-size: 25px;
    font-family: 'Playfair Display', sans-serif;
    font-weight: 400;
    box-sizing: border-box;
    border-style: none;
    margin: 0;
    padding: 0;

}

h1 {
    font-family: 'Playfair Display SC', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    text-align: center;
    margin-top: 2rem;
    line-break: loose;
}

h2 {
    font-weight: 700;
    font-size: 1.5rem;
    text-align: left;
    display: flex;
    align-items: center;
    height: 100%;
}


p {
    font-size: 1rem;
}

    b {
        font-weight: 800;
    }

span {
    font-size: 1rem;
}

a {
    /*font-style: italic;*/
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    color: var(--black);
    text-decoration: none;
    transition: all .4s ease-in-out;
  }
  
    a:hover{
        color: gray;
        transition: all .1s ease-in-out !important;
        font-size: 1.01em; /*myb Bugs*/
        text-decoration: underline;
    }



img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

q { 
    font-style: italic;
    text-align: center;
    
}
    .quoteClass {
        padding: 20px; 
    }

    .quoteBy {
        margin-top: 20px;
        text-align: right;
    }

.footer {
    display: grid;
    grid-template-columns: repeat(10, 1fr);  
    grid-template-rows: repeat(1, minmax(3rem, auto));
    background-color: var(--black);
    grid-auto-flow: column;
    overflow: hidden;
    height: 5rem;
}

    .wappenIconContainer{
        padding: 5% 0;
        width: auto;
        height: 100%;
    }

        .wappenIcon {
            filter: invert(100%);
            width: 100%;
            height: 100%;
            object-fit: cover;
            width: auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

            .wappenBaum {
                height: 74%;
                transform: translate(0px, 20%);
            }

            .wappenJungHelm{
                height: 109%;
                transform: translate(0px, -3%);   
            }
    
    .footerLinks {
        grid-column: 5 / 10;
        display: flex;
        justify-content: flex-end;
        align-items: center;

    }

        .footerLinks a{
            color: var(--white);
        }

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


.navBar{
    height: 100%;
}

    .navEmpty {
        grid-column: 1 / 2;
    }

    .navIconContainer {
        width: auto;
        grid-column: 9 / 10;
        display: flex;
        justify-content: center;
    }

        .navIcon{
          height: 99%;
          height: 5rem;
          object-fit: contain;
          transform: translate(0px, 0%);   
        }

        
#full {
    grid-column: 2 / 10;
}

#half_Left {
    grid-column: 2 / 6;    
}

#half_Right {
    grid-column: 6 / 10;    
}

.full {
    grid-column: 2 / 10;
}

.half_Left {
    grid-column: 2 / 6;    
}

.half_Right {
    grid-column: 6 / 10;    
}
            
            
            

            
            


            
.emptyContainer{
    height: 100%;
}
            
.button {
    background-color: rgb(0, 0, 0);
    text-align: center;
    transition: all .4s ease-in-out;
    min-height: 3rem;
}
    .button p {
        color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        border-style: hidden;
    }

    .button a {
        display: block;
        width: 100%;
        height: 100%;
        font-weight: 200;
    }

    .button span{
        display: flex;
        margin: auto;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        color: var(--white);
    }
    
    .button:hover{
        background-color: rgb(0, 0, 0, 0);
        border-style: solid;
        border-width: var(--border-width);    
        transition: all .1s ease-in-out !important;
        color: var(--black);
    }

    .button:hover *{
        transition: all .1s ease-in-out !important;
        color: var(--black);
        text-decoration: underline;
    }

    .buttonActive {
        background-color: rgb(0, 0, 0, 0) !important;
        border-style: solid !important;
        border-color: var(--black);
        border-width: var(--border-width);      
    }

        .buttonActive span{
            color: var(--black) !important;
        }

        .buttonActive a span{
            color: var(--black) !important;
        }
            
            
            /*c Classes */
            
/*HERO IMAGE FIT*/

.imgOverlayContainer {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 50vh;

}

        .overlayIcon{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .overlayIcon img {
            width: 80vw;
            max-height: 45vh;
            height: fit-content;
            object-fit: contain;
        }

#myInput{
    grid-column: 2 / 10;
    grid-row: 3;
    border: 2px solid black;
    border-radius: 0px;
    padding-left: 20px;
}


@media only screen and (max-width: 1000px) {
    * {
        font-size: 20px;
    }

    .footer img{
        visibility: hidden;
        width: 0px;
        height: 0px;
        z-index: -99;
    }

   
}

@media only screen and (max-width: 800px) {
    * {
        font-size: 19px;
    }  
}

@media only screen and (max-width: 600px) {
    * {
        font-size: 18px;
    }

    .navIconContainer{
        grid-column: 7 / 10;
    }

    #half_Left{
        grid-column: 2 / 10; 
    }

    #half_Right{
        grid-column: 2 / 10; 
    }

    h1 {
        font-size: 2rem;
    }
    
}