/*grid.css*/

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;   /* DAS ist der Schalter */
}

@media (max-width: 768px) {
  html, body {
    height: auto;
    overflow: auto;
  }
}

#bdy_div{
  display: grid;
  height: 100dvh;
  grid-template-columns: 1fr min(1000px, 100%) 1fr;

  grid-template-areas:
    "bdy_left bdy_middle bdy_right";
}

@media (max-width: 768px) {
    #bdy_div {
        height: auto;
        min-height: 100dvh;
        grid-template-columns: 1fr;
        grid-template-areas:
        "bdy_middle";
    }
}


#bdy_left_div   { grid-area: bdy_left; }
#bdy_right_div  { grid-area: bdy_right; }

@media (max-width: 768px) {
  #bdy_left_div, #bdy_right_div {
    display: none;
  }
}

#bdy_middle_div{
  grid-area: bdy_middle;
  min-height: 0;
  display: grid;
  grid-template-rows: 20px 1fr;
  grid-template-columns: 1fr min(1000px, 100%) 1fr;
  grid-template-areas:
    ". padding ."
    ". layout  .";
}



@media (max-width: 768px) {
  #bdy_middle_div {
    grid-template-columns: 1fr;   /* WICHTIG */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "padding"
      "layout";

    justify-items: stretch;       /* Sicherheit */
  }
}



#padding_top_div {
  grid-area: padding;
  width: 100%;
}


#layout_div {
  grid-area: layout;
  display: grid;
  margin: 0 auto;
  min-width: 0;
  min-height: 0;


  grid-template-columns: 160px 1fr 35px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "header_left    header_banner   header_right"
    "nav            content         content_right"
    "footer_left    footer          footer_right";
}


@media (max-width: 768px) {

    #layout_div {
        margin: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
        "header_banner"
        "content"
        "footer";
    }

}

#header_left_div   { grid-area: header_left; }
#header_banner_div        { grid-area: header_banner; }
#header_right_div  { grid-area: header_right; }

@media (max-width: 768px) {


  #header_left_div, #header_right_div {
    display: none;
  }

}

div#nav_div { grid-area: nav; }

@media (max-width: 768px) {

  #nav_div {
    display: none;
  }
}

#content_div{
  grid-area: content;
  min-height: 0;
}

#content_right_div { grid-area: content_right; }


@media (max-width: 768px) {
    #content_right_div { 
        display:none;
    }

}

#footer_left_div   { grid-area: footer_left; }
#footer_div        { grid-area: footer; }
#footer_right_div  { grid-area: footer_right; }

@media (max-width: 768px) {
  #footer_left_div, #footer_right_div {
    display: none;
  }

}