/* --- Laptop --- */
@media only screen and (max-width: 1366px) {
    div.hundeleiste     { max-width: 1200px; max-height: 120px;}
    div.hundeleiste svg {width: 100%; max-height: 100px;}

    div.WebHeader       {max-width: 800px; margin: 0 auto; left: 0; transform: translate(0, 0);}

    div.freilaufzone    {max-width: 800px; height: 60px; margin: 0 0;}
    div.freilaufzone svg {width: 800px; max-height: 68px;}

    div.WebMenu         {max-width: 100%; height: 48px; top: -10px; margin: 0 0; left: 0px;}
    div.WebMenu ul li   {font-size: 22px;}

    div.WebMenuSchalter { display: none;}

    div.WebFenster      { max-width: 800px; min-height: 320px; left: 0px; margin: 0 auto; min-height: calc( 100% - 180px);}
    div.WebContent      { min-width: calc( 100% - 48px ); margin: -10px 24px 0 24px; padding: 40px 0 200px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 10px); margin: 0 5px; left: 0px; min-height: 160px;}
}


/* --- Tablet: Landscape --- */
@media only screen and (max-width: 1200px) {
    div.hundeleiste     { max-width: 98%; max-height: 100px;}
    div.hundeleiste svg {width: 100%; max-height: 100px;}

    div.WebHeader       {max-width: 800px; margin: 0 auto; left: 0px; transform: translate(0, 0);}

    div.freilaufzone    {max-width: 800px; height: 60px; margin: 0 0;}
    div.freilaufzone svg {width: 800px; max-height: 68px;}

    div.WebMenu         {max-width: 100%; height: 44px; top: -10px; margin: 0 0; left: 0px;}
    div.WebMenu ul li   {font-size: 20px;}
    div.WebMenuSchalter { display: none;}

    div.WebFenster      { max-width: 800px; min-height: 320px; left: 0px; margin: 0 auto; min-height: calc( 100% - 172px);}
    div.WebContent      { min-width: calc( 100% - 48px ); margin: -10px 24px 0 24px; padding: 40px 0 200px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 10px); margin: 0 5px; left: 0px; min-height: 160px;}
}



/* --- Tablet: Portrait --- */
@media only screen and (max-width: 960px) {
    div.hundeleiste     { max-width: 98%; max-height: 80px;}
    div.hundeleiste svg {width: 100%; max-height: 80px;}

    div.WebHeader       {max-width: 660px; margin: 0 auto; left: 0px; transform: translate(0, 0);}

    div.freilaufzone    {max-width: 660px; height: 58px; margin: 0 0;}
    div.freilaufzone svg {width: 660px; max-height: 70px;}

    div.WebMenu         {max-width: 100%; height: 40px; top: -10px; margin: 0 0; left: 0px;}
    div.WebMenu ul li   {font-size: 16px;}
    div.WebMenuSchalter { display: none;}

    div.WebFenster      { max-width: 660px; min-height: 320px; left: 0px; margin: 0 auto; min-height: calc( 100% - 142px);}
    div.WebContent      { min-width: calc( 100% - 48px ); margin: -10px 24px 0 24px; padding: 40px 0 200px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 8px); margin: 0 4px; left: 0px; min-height: 160px;}
}


/* --- Mobile Phones --- */
@media only screen and (max-width: 739px) {
    div.hundeleiste     { max-width: 100%; max-height: 72px;}
    div.hundeleiste svg {width: 100%; max-height: 72px;}

    div.mobilmenu       {top: 110px;}

    div.WebHeader       {max-width: calc( 100% - 16px ); left: 8px; transform: translate(0, 0);}

    div.freilaufzone    {max-width:  calc( 100% - 16px ); height: 50px; margin: 0 auto;}
    div.freilaufzone svg {width: 100%; max-height: 55px;}

    div.WebMenu         { display: none; max-width:  calc( 100% - 16px ); height: 36px; top: -10px; margin: 0 0; left: 8px;}
    div.WebMenu ul li   {font-size: 14px;}
    div.WebMenuSchalter { display: block; position: absolute; right: 8px; top: 12px; height: 42px; z-index: 110;}
    div.WebMenuSchalter img { height: 42px;}

    div.WebFenster      { max-width:  calc( 100% - 32px ); min-height: 320px; left: 16px; margin: 0 0; min-height: calc( 100% - 112px);}
    div.WebContent      { min-width: calc( 100% - 48px ); margin: -10px 24px 0 24px; padding: 40px 0 200px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 6px); margin: 0 3px; left: 0px; min-height: 160px;}
}

/* --- Mobile Phones --- */
@media only screen and (max-width: 600px) {
    div.hundeleiste     { max-width: 100%; max-height: 55px;}
    div.hundeleiste svg {width: 100%; max-height: 55px;}

    div.mobilmenu       {top: 110px;}

    div.WebHeader       {max-width: calc( 100% - 16px ); left: 8px; transform: translate(0, 0);}

    div.freilaufzone    {max-width: calc( 100% - 16px ); height: 55px; margin: 0 auto;}
    div.freilaufzone svg {bottom: 0px; width: 100%; max-height: 70px; top: 5px;}

    div.WebMenu         {max-width:  calc( 100% - 16px ); height: 34px; top: -10px; margin: 0 0; left: 8px;}
    div.WebMenu ul li   {font-size: 12px;}
    div.WebMenuSchalter { display: block; position: absolute; right: 8px; top: 16px; height: 42px; z-index: 110;}
    div.WebMenuSchalter img { height: 42px;}

    div.WebFenster      { max-width:  calc( 100% - 32px ); min-height: 320px; left: 16px; margin: 0 0; min-height: calc( 100% - 92px);}
    div.WebContent      { min-width: calc( 100% - 48px ); margin: -10px 24px 0 24px; padding: 40px 0 200px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 6px); margin: 0 3px; left: 0px; min-height: 160px;}
}

/* --- Mobile Phones --- */
@media only screen and (max-width: 550px) {
    div.hundeleiste     { max-width: 100%; max-height: 50px;}
    div.hundeleiste svg {width: 100%; max-height: 50px;}

    div.mobilmenu       {top: 100px;}

    div.WebHeader       { max-width: calc( 100% - 32px ); left: 16px; transform: translate(-0, 0);}

    div.freilaufzone    { max-width: 100%; height: 45px; margin: 0 0;}
    div.freilaufzone svg { bottom: 0px; width: 100%; max-height: 70px;}

    div.WebMenu         {display: none; max-width: 100%; height: 34px; top: -10px; margin: 0 0; left: 8px;}
    div.WebMenu ul li   {font-size: 12px;}
    div.WebMenuSchalter { display: block; position: absolute; right: 0px; top: 16px; height: 42px; z-index: 110;}
    div.WebMenuSchalter img { height: 42px;}

    div.WebFenster      { max-width: calc( 100% - 32px ); min-height: 320px; left: 16px; margin: 0 0; min-height: calc( 100% - 82px);}
    div.WebContent      { min-width: calc( 100% - 48px ); margin: -10px 24px 0 24px; padding: 40px 0 200px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 6px); margin: 0 3px; left: 0px; min-height: 160px;}

    footer           { flex-direction: column;}

}