/* --- 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 320px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 10px); margin: 0 5px; left: 0px; min-height: 160px;}

    div.WebContent img.rechts   { width: 48%; margin: 0 0 12px 12px; padding: 0;}
    div.WebContent img.links   { width: 48%; margin: 0 12px 12px 0; padding: 0;}

    ul.galerie          {}
    ul.galerie img      { width: 230px;}

}


/* --- 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 320px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 10px); margin: 0 5px; left: 0px; min-height: 160px;}

    div.WebContent img.rechts   { width: 48%; margin: 0 0 12px 12px; padding: 0;}
    div.WebContent img.links   { width: 48%; margin: 0 12px 12px 0; padding: 0;}

    ul.galerie          {}
    ul.galerie img      { width: 230px;}
    
}



/* --- 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 320px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 8px); margin: 0 4px; left: 0px; min-height: 160px;}

    div.WebContent img.rechts   { width: 48%; margin: 0 0 12px 12px; padding: 0;}
    div.WebContent img.links   { width: 48%; margin: 0 12px 12px 0; padding: 0;}

    ul.galerie          {}
    ul.galerie img      { width: 30vw;}
    
}


/* --- 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: 0px;}

    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 320px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 6px); margin: 0 3px; left: 0px; min-height: 160px;}

    div.WebContent img.rechts   { float: none; width: 98%; margin: 0 0 12px 0; padding: 0;}
    div.WebContent img.links   { float: none; width: 98%; margin: 0 0 12px 0; padding: 0;}

    ul.galerie          {}
    ul.galerie img      { width: 40vw;}

    div.WebContent ul.gallery   {margin: 0 0 0 0;}
    div.WebContent ul.gallery li   {margin: 0; padding: 0;}
    .gallery {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 12px;
    }

    div.WebContent ul.rechts         { float: right; margin-bottom: 24px;}
}

/* --- 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: 0px;}

    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 320px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 6px); margin: 0 3px; left: 0px; min-height: 160px;}

    div.WebContent img.rechts   { float: none; width: 98%; margin: 0 0 12px 0; padding: 0;}
    div.WebContent img.links   { float: none; width: 98%; margin: 0 0 12px 0; padding: 0;}
    
    ul.galerie          {}
    ul.galerie img      { width: 86vw;}
    
}

/* --- 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: 0px;}

    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 ); 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 320px 0; min-height: 100%;}
    div.WebFooter       { width: calc( 100% - 6px); margin: 0 3px; left: 0px; min-height: 160px;}

    footer           { flex-direction: column;}
    
    div.WebContent img.rechts   { float: none; width: 98%; margin: 0 0 12px 0; padding: 0;}
    div.WebContent img.links   { float: none; width: 98%; margin: 0 0 12px 0; padding: 0;}

    ul.galerie         {}
    ul.galerie img      { width: 79vw;}

    div.WebContent ul.gallery   {margin: 0 0 0 0;}
    div.WebContent ul.gallery li   {margin: 0; padding: 0;}
    .gallery {
        list-style: none;
        margin: 0 0 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 12px;
    }

    div.WebContent ul.rechts         { float: right; margin-bottom: 24px;}
}