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