:root {
    --sch-imgbordercolor1: #9a6476;
    --sch-article-bg-clr-1:#fefaf4;
    --sch-img-weintraube: url(../../../images/assets/weintraube_2.avif);
    --sch-img-note1: url(../../../images/assets/noten1.avif);

}

h1 , h2 {
    font-family: 'Cormorant';
    font-weight: bold;
}

h2 {
    color: var(--sch-imgbordercolor1);
    font-size: 1.4rem;
    text-transform: uppercase;
}

h4 {
    font-family: 'Cormorant';
}

.sch-btn-primary {
    --bs-btn-color:#fff;
    --bs-btn-bg: var(--sch-imgbordercolor1);
    --bs-btn-border-color: none;
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:#744b58;
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb:49,132,253;
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:#744b58;
    --bs-btn-active-border-color: none;
    --bs-btn-active-shadow:inset 0 3px 5px #00000020;
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg:#744b58;
    --bs-btn-disabled-border-color:#0d6efd;
    border-radius: 15px;
    --bs-btn-padding-x: 2rem;
  }

.sch-article-head-l {
    margin: auto;
    width: min(80%, 1200px);
    text-align: left;
}

.sch-img-border {
    border: solid;
    border-color: var(--sch-imgbordercolor1);
}

.sch-head-text {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.sch-head-text h1 {
    font-size: 4.2rem;
}

.sch-head-container {
    position: relative;
    text-align: center;
  }

.sch-center2 {
    text-align: center;
    padding: 80px 0px;
}

.article_style_Feiern , .article_style_sommer-highlights , .article_style_Raeume {
    background-color: var(--sch-article-bg-clr-1);

  }

.article_style_kulinarischen-besonderheiten {
    text-align: center;

  }

.article_style_Unsere-Specials , .article_style_sommer-carousel {
    background-color: var(--sch-article-bg-clr-1);
    background-image: var(--sch-img-weintraube);
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: 3% 10%;

  }


a.anchoroffset {
    display: block;
    position: relative;
    top: -60px;
    visibility: hidden;
}

  /* grid groups */

.parentgr3 {
    max-width: 1250px;
    margin: auto;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr) 0.5fr repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr) 2fr repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }

.parentgr3 img {
    border: solid;
    border-color: var(--sch-imgbordercolor1);
}
    
    .div1gr3 { grid-area: 1 / 6 / 5 / 9; }
    .div2gr3 { grid-area: 3 / 4 / 6 / 7; }
    .div3gr3 { grid-area: 4 / 2 / 7 / 5; }
    .div4gr3 { grid-area: 1 / 1 / 5 / 6; } 




.parentgr4 {
    max-width: 1250px;
    margin: auto;
    align-self: center;
    display: grid;
    grid-template-columns: 1.5fr repeat(2, 1fr) 2fr;
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
        
    .div1gr4 { 
        grid-area: 1 / 1 / 4 / 3;
        padding: 10%;
        margin: auto;
        border: solid;
        border-color: var(--sch-imgbordercolor1);
    
    }

    .div2gr4 { 
        grid-area: 3 / 2 / 6 / 4;
        border: solid;
        border-color: var(--sch-imgbordercolor1);
        margin: auto;
     }

     .div3gr4 { 
            grid-area: 1 / 3 / 4 / 5;
            margin: auto; }
    .div4gr4 { 
            grid-area: 3 / 4 / 6 / 5; 
            margin: 10% 3%;
        }


        @media only screen and (max-width: 600px) {
            .parentgr3 , .parentgr4 {
                max-width: 85%;
                margin: auto;
                align-self: center;
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-column-gap: 0px;
                grid-row-gap: 0px;
                }
                .div1gr3  { grid-area: 1 / 1 / 2 / 2; }
                .div2gr3  { grid-area: 2 / 1 / 3 / 2; }
                .div3gr3  { grid-area: 3 / 1 / 4 / 2; }
                .div4gr3  { grid-area: 4 / 1 / 5 / 2; } 


                .div1gr4 { 
                    grid-area: 1 / 1 / 2 / 2;
                    padding: 10%;
                    margin: auto;
                    border: solid;
                    border-color: var(--sch-imgbordercolor1);
                
                }
            
                .div2gr4 { 
                    grid-area: 2 / 1 / 3 / 2;
                    border: solid;
                    border-color: var(--sch-imgbordercolor1);
                    margin: auto;
                 }
            
                 .div3gr4 { 
                        grid-area: 3 / 1 / 4 / 2;
                        margin: auto; }
                .div4gr4 { 
                        grid-area: 4 / 1 / 5 / 2; 
                        margin: auto;
                    }
    
    
        }

.parentgr5 {
    display: grid;
    grid-template-columns: 1fr 0.5fr repeat(2, 1fr);
    grid-template-rows: 2fr 0.2fr 1.5fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }

    .parentgr5 img {
        border: solid;
        border-color: var(--sch-imgbordercolor1);
        }
            
    .div1gr5 { grid-area: 1 / 1 / 3 / 3; }
    .div2gr5 { grid-area: 2 / 2 / 4 / 4; }
    .div3gr5 { 
                grid-area: 1 / 3 / 3 / 5;
                padding: 5%;
             }




.parentgr6 {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr) 2fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
                
    .div1gr6 { grid-area: 1 / 1 / 2 / 2; }
    .div2gr6 { grid-area: 1 / 2 / 2 / 3; }
    .div3gr6 { grid-area: 2 / 1 / 3 / 2; }
    .div4gr6 { grid-area: 2 / 2 / 3 / 3; }
    .div5gr6 { grid-area: 1 / 3 / span 2 / auto; }


.parentgr7 {
    display: grid;
    grid-template-columns: 0.7fr repeat(2, 1fr);
    grid-template-rows: 0.7fr 1.3fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
      }
                    
    .div1gr7 { grid-area: 1 / 1 / 3 / 3; }
    .div2gr7 { grid-area: 2 / 2 / 4 / 4; }

.parentgr8 {
    max-width: 1250px;
    margin: auto;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr) 0.2fr repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
      }
                        
    .div1gr8 { grid-area: 1 / 3 / 4 / 6; }
    .div2gr8 { grid-area: 2 / 1 / 5 / 4; }
    .div3gr8 { grid-area: 3 / 2 / 6 / 5; }

    .parentgr8 img {
        border: solid;
        border-color: var(--sch-imgbordercolor1);
        }
                        
                    
                


.headscroll{
    background-color: #7a515f;
    box-shadow: 0px 10px 15px grey;
    transition: 0.8s ease-in-out;
    }

.headscroll #logo {
    max-width: 120px;
    }
            
.sch-caption-head {
    bottom: 30%;
    }

.sch-caption-head h1 {
    font-size: 120px;
    }



.parentfl2 {
    margin: auto;
    display: flex;
    height: auto; 
    }
              
    .div1fl2 {
    width: 1fr;  /* Or whatever */
    height: auto; /* Or whatever */
    margin: auto;  /* Magic! */
    max-width: 40%;
    }