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

    .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%;
    }  


    .NoMobile {
        display:none;
    }

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



    .Zucht {
      float:none;
      width:100%;
      height:auto;
      padding:25px;
      border:0;
      border-color:#fff;
      border-style:solid;
      border-bottom-width:4px;  
    }    
  
    .Zucht figure {
        float:none;
        margin-left:0;
    }
  
    .Zucht  img {
        width:auto;
        max-width:280px;
        max-height:300px;
        margin:0;
        margin-right:45px;
    }
    
    .Zucht .rte p {
        float:none;
        padding:0;
        margin:0;
        margin-bottom: 0px;
        font-size:0.8em;  
    }
    


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

    .Rueden figure {
        float:none;
        font-size:0;   
        margin-left:0;
    }

    .Rueden .rte p{
        padding:0;
        margin:0;
        margin-bottom: 0px;
        font-size:0.8em;  
    }

    .Rueden  img {
        width:auto;
        max-width:250px;
        max-height:250px;
        margin:0;
        margin-right:25px;
    }
  
    .LinkeSeite,
    .RechteSeite {
        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;
    }


    .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;
    }
    

    
    .NoMobile {
        display:none;
    }

    
}