/* Ab 1375 beginnt die responsive Darstellung */

@media screen and (max-width: 1375px){
    
    .mod_customnav.block {
        margin-top: -70px;
    }    
    
    .mod_customnav.block level_1,
    .mod_customnav.block level_2 {
        font-weight: normal !important;
    }
    
	body {
    	overflow-x:hidden;
    	margin-right:0;
    	margin-left:0;
    }

    .home {
      width: 99%;
    }  
    

    
    #header {
        height:0px;
    }
    
    .HPTMenu1,
    #nav-menu2,
    #CEBLogo {
        display:none;
    }
    
    #main {
       margin-top:90px;
    }

    
    .home figure {
        max-width:300px;
        height:auto;
        margin-left:15px;
    }
    
    
    .mod_mobile_menu {
		display:block;
    }
    
    .MenuHeader {
        font-size: 0.8em;
        text-align: center;
        margin-top:-40px;
    }
    
    .Headerbild {
        width:100%; 
        height:180px;
    }
    

    /* 1. Container (der Artikel) bekommt das exakte Bildverhältnis */
    .mod_article.has-responsive-background-image.parallax,
    .mod_article.parallax.block {
        position: relative !important;
        height: auto !important;
        aspect-ratio: 1920 / 768 !important;     /* dein Original-Verhältnis 1920×768 */
        min-height: 140px !important;            /* Minimum auf kleinen Bildschirmen */
        overflow: hidden !important;
    }

    /* 2. Das Parallax-Div wird exakt so groß wie der Container */
    .mod_article.has-responsive-background-image.parallax [data-controller="parallax"],
    .mod_article.parallax.block [data-controller="parallax"] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
    }


    .Headerbild .caption {
        margin-top:-70px;
        margin-right:-40px !important;
        font-size:1em;
    }
    
    
    .ContentSpalte {
        margin: 30px auto;
        width:90%;
        font-size:1.2em;
        color:#231f20;
    }
    
    .GalerieVerwaltung figure {
        margin-right:0.5rem;
    }
    
    .Welpen {
        min-height:215px;
    }

    
    
}


@media screen and (max-width: 900px){
    
    .mod_customnav.block {
        margin-top: -70px;
    }
    
    .GalerieVerwaltung {
        float:none;
        width:100%;
    }
    
    .ButtonMargin a{
        margin-top:10px !important;
    }

    .ButtonMargin2 a{
        margin-top:10px !important;
    }
  
    .ZuchtL {
        float:none;
        height:230px;          /* oder min-height */    
        width:100%;
        padding-left:35px;    
        padding-top:25px;
        border:0;
        border-top-width:4px;
        border-right-width:0;
        border-color:#fff;
        border-style:solid;
    }

    .ZuchtR {
        float:none;
        height:230px;          /* oder min-height */    
        width:100%;
	    padding:0;
	    padding-left:35px;
        padding-top:25px;
        border:0;
        border-top-width:4px;
        border-color:#fff;
        border-style:solid;
    }  
  
    .Welpen {
        min-height:120px;
    }

    .Welpen p {
        font-family:'Alex Brush';
        font-weight:bold;
        font-size:2.5em;
        color:#8e5841;
        line-height:1em;
        transform: rotate(-6deg);
        margin-top:-45px; 
        margin-left:30%;
    }  
  
  
    .RuedenL {
        float:none;
        height:320px;          /* oder min-height */    
        width:100%;
        padding-left:35px;
        padding-top:25px;
        border:0;
        border-top-width:4px;
        border-right-width:0;
        border-color:#fff;
        border-style:solid;
    }

    .RuedenR {
        float:none;
        height:320px;          /* oder min-height */    
        width:100%;
	    padding:0;
	    padding-left:35px;
        padding-top:25px;
        border:0;
        border-top-width:4px;
        border-color:#fff;
        border-style:solid;
    }

    .NoMobile {
        display:none;
    }

    .GeschichteLinks,
    .GeschichteRechts {
        float:none;
        width:100%;
    }

}
  
@media screen and (max-width: 400px){
    .GalerieVerwaltung figure{
        max-width:140px;
    }

    .weisseLinie {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .ButtonMargin a{
        margin-top:10px !important;
        margin-bottom:25px;
    }

    .ZuchtL {
        float:none;
        height:230px;          /* oder min-height */    
        width:100%;
        padding-left:15px;    
        padding-top:25px;
        border:0;
        border-top-width:4px;
        border-right-width:0;
        border-color:#fff;
        border-style:solid;
    }

    .ZuchtR {
        float:none;
        height:230px;          /* oder min-height */    
        width:100%;
	    padding:0;
	    padding-left:15px;
        padding-top:25px;
        border:0;
        border-top-width:4px;
        border-color:#fff;
        border-style:solid;
    }  
    
    .ZuchtL  img,
    .ZuchtR  img {
        width:auto;
        max-width:150px;
        max-height:200px;
        margin:0;
        margin-right:10px;
    }
  
    .Welpen {
        min-height:90px;
    }

    .Welpen p {
        font-family:'Alex Brush';
        font-weight:bold;
        font-size:1.5em;
        color:#8e5841;
        line-height:1em;
        transform: rotate(-6deg);
        margin-top:-25px; 
        margin-left:15%;
    }  
    
    #zuechterinnen .rechtesElement, 
    #zuechterinnen .linkesElement {
        float:none;
        width:100%;
    }
    
    #zuechterinnen .linkesElement2 {
        float:none;
        width:100%;
        margin-bottom:10px;
    }
    
    .RuedenL {
        float:none;
        height:320px;          /* oder min-height */    
        width:100%;
        padding-left:15px;
        padding-top:25px;
        border:0;
        border-top-width:4px;
        border-right-width:0;
        border-color:#fff;
        border-style:solid;
    }

    .RuedenR {
        float:none;
        height:320px;          /* oder min-height */    
        width:100%;
	    padding:0;
	    padding-left:15px;
        padding-top:25px;
        border:0;
        border-top-width:4px;
        border-color:#fff;
        border-style:solid;
    }


    .RuedenL  img,
    .RuedenR  img {
        float:clear;
        width:auto;
        max-width:120px;
        max-height:120px;
        margin:0;
        margin-right:10px;
    }  
    
    .NoMobile {
        display:none;
    }

    
}