:root{
/*     --color_pri:#dfdfdf;
    --color_sec:#f2f2f2;
    --color_ter: #dfdfdf;
    --color_qua: #bababa;
    --color_txt: #000000;
    --color_link: #000000; */

    --color_pri:#f2f8e4;
    --color_sec:#f5fbf1;
    --color_ter: #dfdfdf;
    --color_qua: #bababa;
    --color_txt: #000000;
    --color_link: #000000;
    --color_burgerbg: #d6dec4;
    --color_burgerfg: #78923b;

    --font-size_ueberschrift: 32pt;
    --font-size_ueberschrift_sub: 22pt;
    --font-size_header: 2vw;
    --font-size_txt: 16pt;
    --font-size_footer: 12pt;
}

html {  scroll-behavior: smooth;}

body{
    width: 100%;
    margin:0;
    font-size:var(--font-size_txt);
    background-color: var(--color_sec);
    font-family: Lato-Light;
}

@font-face {
    font-family: 'Lato-Regular';
    src: url('./fonts/Lato-Regular.woff') format('woff2'),
        url('./fonts/Lato-Regular.woff2') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato-Light';
    src: url('./fonts/Lato-Light.woff') format('woff2'),
        url('./fonts/Lato-Light.woff2') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

a { 
    color:var(--color_link);
    text-decoration-thickness: 1px;
}

p{ margin-bottom:2vw;}

hr {
  border:0;
  clear:both;
  background-color:#000;
  opacity:0.4;
  height: 1px;
  display:block;
  width: 50%;
  margin-top:4vw;
  margin-bottom:4vw;
}


ul li{                  margin-bottom:1vw;}

.ueberschrift{
    font-size:var(--font-size_ueberschrift);
    width:100%;
    text-align:center;
    margin-bottom:4vw;
}

.ueberschrift{
    font-size:var(--font-size_ueberschrift);
    width:100%;
    text-align:center;
}

.ueberschrift_sub{
    font-size:var(--font-size_ueberschrift_sub);
    margin-bottom:2vw;
}

.ueberschrift_sub_center,#div_ausstattung_txt_heiz{
    text-align:center;
    font-size:var(--font-size_ueberschrift_sub);
    margin-bottom:2vw;
}
.clickable{ cursor: pointer;}

#div_header{
    color: var(--color_pri);
    background-color: var(--color_pri);
    box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
    font-size: var(--font-size_header);
    font-family: Lato-Light;
    display: grid;
    grid-template-columns: 10vw auto ;
    grid-template-rows:10px;
    z-index: 1000;
    width: 95%;
    height:3vw;
    position: fixed;
    left:50%;
    transform: translateX(-50%);
    padding-top:1vw;
    overflow:visible;
    
}

#div_header_img{
    position:fixed;
    width:10vw;
    height:auto;
    top:0vw;
    left:7vw;
    z-index:1001;
}

#img_header{
    width:100%;
    height:auto;
}



#div_menu_burgerbutton{
    visibility: hidden;
    background-color:var(--color_burgerbg);
    color:var(--color_link);
    display:block;
    position:fixed;
    z-index:1002;
    right:0vw;
    width:12vw;
    height:auto;
    text-align:center;
    font-size:var(--font-size_ueberschrift);
    font-weight: bold;
    box-shadow: -1px 1px 3px 1px rgba(128, 128, 128, 0.438);
}



#ul_menu{
    display:flex;
    list-style: none;
    margin:0;
    visibility: visible;    
}

.li_menu_item{
    flex-grow:1;
    display:block;
    float:left;
    margin-left:1vw;
}

.li_menu_item a{
    color: var(--color_link);
    text-decoration: none;
}

.li_menu_item:hover{   font-weight:bold;}




#div_main{
    background-color: var(--color_sec);
    color: var(--color_txt);
    display:grid;   
    width:90%;
    padding:8vw;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    overflow:visible;
    box-sizing:border-box;
}

#div_footer{
    background-color:var(--color_pri);
    font-size:var(--font-size_footer);
    text-align:center;
    width:100%;
    bottom:0;
}

#div_datenschutz{   margin:4vw;}

#div_start,
#div_ausstattung,
#div_lage,
#div_preise,
#div_zallnerhof,
#div_freizeit,
#div_plan,
#div_kontakt{
    display:grid;
    max-width:100%;
    grid-gap:2vw;
}

#img_start, #img_ausstattung, #img_lage,#img_zallnerhof, #img_plan{
    max-height: 100%; 
    width: auto; 
    max-width: 100%;
    object-fit: cover;
    align-self: stretch;
}

/* ##############################  START   ##############################*/

#div_start{ 

    grid-template-columns: auto auto;
}

#div_start_h{ grid-column: 1/3;}

#div_start_txt{
    grid-column: 1/3;
}

/* ##############################  AUSSTATTUNG   ##############################*/

#div_ausstattung{   grid-template-columns: 1fr 1fr;}

#div_ausstattung_ul_left{text-align:left;}
#div_ausstattung_ul_right{text-align:right;}

.ul_ausstattung{
    list-style-position: inside;
    list-style-type:none;
}

#div_ausstattung_h{ grid-column: 1/3;}

#div_ausstattung_txt_heiz{
    grid-column:1/3;
    text-align:center;
}

#img_ausstattung_grundriss{
    max-height: 100%; 
    width: auto; 
    max-width: 100%;
    object-fit: cover;
    align-self: center;
}

/* ##############################  LAGE   ##############################*/

#div_lage{      grid-template-columns: 1fr 1fr 1fr;}
#div_lage_h{    grid-column: 1 / 4;}

#div_lage_txt_left,
#div_lage_txt_right,
#div_lage_txt_map,
#div_ausstattung_ul_left,
#div_ausstattung_ul_right{
    align-self:center;
}

#div_lage_txt_left{ text-align: left;}
#div_lage_txt_right{text-align: right;}

#div_lage_txt_map{  grid-column:2/4;}

#iframe_map{
    width:100%;
    height:20vw;
    border:0;
    grid-column:1 / 4;
}


/* ##############################  PREISE   ##############################*/

#div_preise{        grid-template-columns: 1fr 1fr;}
#div_preise_h{      grid-column: 1 / 3;}
#div_preise_txt{ align-self:center;}

/* ##############################  ZALLNERHOF   ##############################*/

#div_zallnerhof{    grid-template-columns: 1r 1fr 1fr;}
#div_zallnerhof_h{  grid-column: 1 / 4;}
#div_zallnerhof_txt{grid-column: 1/4;}


/* ##############################  FREIZEIT   ##############################*/


/* ##############################  BELEGUNGSPLAN   ##############################*/

#div_plan{
    display:grid;
    grid-template-columns: auto auto;
    text-align:center;
    width:100%;
}

#div_plan_h{    grid-column:1/3;}

#div_plan_iframe{
    grid-column: 1/3;
    width:auto;
    height:50vw;
}

/* ##############################  KONTAKT   ##############################*/

#div_kontakt{
    justify-items: center;
    margin-bottom: 10vw;
}


#tbl_kontakt{
    margin:auto;
    border-spacing: 0 16px; /* Vertikaler Abstand zwischen den Zeilen */
   border-collapse: separate;
}

#tbl_kontakt td{
    padding-right:1vw;
}


#div_kontakt_alternativen{
   /*  margin-top:3vw; */
    text-align:center;
    justify-items: center;
}

#div_kontakt_alternativen a{
    display:block;
    height:32px;
}

#div_kontakt_alternativen p{
    display:block;
    margin:32px;
}