* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
}

@font-face {
  font-family: "L";
  src: url("../fonts/Laksaman.woff2") format("woff2"),
       url("../fonts/Laksaman.woff") format("woff");
}

body {
        font-size: 100%;
        font-family: "L", Arial, sans-serif;
        background-color: #FAFAFA;
        height: 100vh;
        width: 60vw;
        margin: auto;
        display: grid;
        grid-template-rows: auto 0.5fr 8fr 0.5fr;
        grid-template-columns: auto auto auto;
        grid-template-areas:
        "header header header"
        "navL navM navR"
         "main main main"
        "footer footer footer";

}

header {
         grid-area: header;
         background-color: white;
         padding-bottom: 1vh;
         border-bottom: 1px solid black;

}

headerBottomL {
         grid-area: headerBottomL;
         background-color: white;
         padding-bottom: 1vh;
}

headerBottomR {
         grid-area: headerBottomR;
         background-color: white;
         padding-bottom: 1vh;
}

navL {
         grid-area: navL;
         background-color:#EFF6F2;
         padding-top: 1vh;
         padding-bottom: 1vh;

}
navM {
         grid-area: navM;
         background-color:#EFF6F2;
         padding-top: 1vh;
         padding-bottom: 1vh;

}
navR {
         grid-area: navR;
         background-color:#EFF6F2;
         padding-top: 1vh;
         padding-bottom: 1vh;

}

main {
         grid-area: main;
         overflow-y: auto;
         background-color:#FAFAE9;
         border-top: 1px solid black;

}
main.start {
         grid-area: main;
         overflow: hidden;
         background-color:#FAFAE9;
         border-top: 1px solid black;

}
span.mitte {
         font-size: 0.8rem;
         vertical-align: middle;
}

footer {
         grid-area: footer;
         background-color: white;
         border-top: 1px solid black;
}
h1 {
        font-size: 3.5rem;
        text-align: center;
        font-weight:normal;
}

h2 {
        font-size: 1.2rem;
        text-align: center;
        font-weight:normal;
}

ex:before {
        content: '|';
        }

p.pmain {
         text-align: left;
         font-weight: bold;
         font-size: 1.6em;
         padding-left: 5vw;
         padding-right: 5vw;
         padding-top: 5vh;
}
p.pmainI {
         text-align: left;
         font-weight: bold;
         font-size: 1.4em;
         padding-left: 5vw;
         padding-right: 5vw;
         padding-top: 2vh;
}
p.pmainI1 {
         margin-top: 12px;
         text-align: left;
         font-weight: bold;
         font-size: 1.2em;
         padding-left: 5vw;
         padding-right: 5vw;
}
p {
         padding-left: 5vw;
         padding-right: 5vw;
         font-size: 1em;
         text-align: justify;
}

p.links_main_h {
        padding-top: 5vh;
        padding-bottom: 2vh;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: left;
        font-size: 1.8rem;
        line-height: 3.8vh;
}

p.links_main {
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        font-size: 1.3rem;
        line-height: 2.8vh;
}

p.links_main_l_z1, p.links_main_l_z3 {
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding-left: 5vw;
        padding-right: 2vw;
        text-align: justify;
        vertical-align: middle;
        font-size: 1.3rem;
        line-height: 2.8vh;
        flex: 3;
        order: 1;
        align-self: center;
}

p.links_main_r_z2 {
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding-left: 2vw;
        padding-right: 5vw;
        text-align: justify;
        vertical-align: middle;
        font-size: 1.3rem;
        line-height: 2.8vh;
        flex: 3;
        order: 2;
      			  align-self: center;
}
div.FlexB {
	display: flex;
	flex-flow: row;
}

p.links_main_img_l_z2 {
        display: flex;
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding-left: 5vw;
        padding-right: 2vw;
        text-align: justify;
        font-size: 1.3rem;
        line-height: 2.8vh;
        flex: 1;
        order: 1;    
}
p.links_main_img_r_z1, p.links_main_img_r_z3 {
        display: flex;
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding-left: 2vw;
        padding-right: 5vw;
        text-align: justify;
        font-size: 1.3rem;
        line-height: 2.8vh;
        flex: 1.5;
        order: 2;
        
       
}
p.links_main_img_l_z2 img.praxis, p.links_main_img_r_z1 img.praxis, p.links_main_img_r_z3 img.praxis { 
	object-fit: cover;
	width: 100%; 
	height: 100%;
	border: 4px solid white;
}

p#email::after {
         content: "nfo@hp-physio-brendel.de";
}

table {
        height: 100%;
        width: 100%;
}
table.links_main {
        height: auto;
        width: 100%;
}

td {
        font-size: 0.8rem;
}

td.mittig_verteilt_header {
        /*width: 33%;*/
        vertical-align: middle;
        text-align: center;
        font-size: 1.2rem;
}
td.links_main_h {
        /*width: 33%;*/
        padding-top: 5vh;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        font-size: 1.8rem;
        line-height: 2.8vh;
}
td.links_main {
        /*width: 33%;*/
        padding-top: 2vh;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        font-size: 1.3rem;
        line-height: 2.8vh;
}
td.mittig_verteilt_footer {
        /*width: 33%;*/
        vertical-align: middle;
        text-align: center;
        font-size: 0.8rem;
}
td.mittig {
        vertical-align: middle;
        text-align: center;
}

img {
        width: 60vw;
        height:100%;

    }
       
img.produkte {
        height: 10vh;
        width: auto;
}
a {
        color: black;
}
a.a_rahmen {
        padding: 1px;
}
a.a_rahmen_header {
        padding: 2px;

}

a.a_rahmen_header:hover {
        background-color: white;
}
a.akt {
        background-color: #D56A00;
}
h3.physio {
         height:0.1em;
         font-size:0.3em;
         animation: physio 11s;
         animation-timing-function: ease;
         animation-iteration-count: infinite;
}
    
         @keyframes physio {
         from {
         opacity: 0;
         width:50%;
         }
         to {
         opacity: 0;
         width: 50%;
         }
         }

@media screen and (max-width: 500px) {
         body {
                 width: 100vw;

                 display: grid;
                 grid-template-rows: 1fr auto auto auto 8fr 0.25fr;
                 grid-template-columns: 1fr;
                grid-template-areas:
        "header"
        "navL"
        "navM"
        "navR"
         "main"
        "footer";
         }

ex:before {
        content: '\A';
        white-space:pre
        }
exh:before {
        content: '\A';
        white-space:pre
        }


header {
         padding-bottom: 0vh;
}

h1 {
        font-size: 1.7rem;
        text-align: center;
        font-weight: normal;
        line-height: 5vh;
        padding-top: 2vh;
}

h2 {
        font-size: 0.8rem;
        text-align: center;
        font-weight:normal;
        padding-top: 3vh;
}

span.mitte {
         font-size: 0.6rem;
         vertical-align: middle;
         line-height: 1vh;
}

p.pmain {
         font-size: 1.0em;
}
p.pmainI {
         font-size: 0.9em;
}
p.pmainI1 {
         font-size: 0.8em;
}
p {
         font-size: 0.7em;
         text-align: justify;
}

div.FlexB {
	display: flex;
	flex-flow: column;
}

table.links_main {
        height: 50%;
        width: 100%;
}

td.mittig_verteilt_header {
           font-size: 0.9rem;
}

p.links_main_h {
        font-size: 1.2rem;
        padding-top: 3vh;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: left;
        line-height: 4vh;
}
p.links_main {
        font-size: 0.9rem;
        padding-top: 1vh;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        line-height: 3vh;
}

p.links_main_l_z1, p.links_main_r_z2, p.links_main_l_z3  {
        font-size: 0.9rem;
        padding-top: 2vh;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        line-height: 3vh;
        flex: 1;
        }

p.links_main_img_r_z1, p.links_main_img_r_z3 {
        display: flex;
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        font-size: 1.3rem;
        line-height: 3vh;
        flex: 1;
        order: -1;    
        }
        
p.links_main_img_l_z2 {
        display: flex;
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        font-size: 1.3rem;
        line-height: 3vh;
        flex: 1;        
}

td.mittig_verteilt_footer {
           font-size: 0.6rem;
}

img {
        width: 100vw;
       }

}

@media screen and (min-width: 501px) and (max-width: 1080px){
div.FlexB {
	flex-flow: column;
}

p.links_main {
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        line-height: 3vh;
}

p.links_main_l_z1, p.links_main_r_z2, p.links_main_l_z3  {
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        flex: 1;
        }

p.links_main_img_r_z1, p.links_main_img_r_z3 {
        display: flex;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        flex: 1;
        order: -1;    
        }
        
p.links_main_img_l_z2 {
        display: flex;
        padding-left: 5vw;
        padding-right: 5vw;
        text-align: justify;
        flex: 1;        
}
p.links_main_h {
        line-height: 4.4vh;
}

}