@media only screen and (max-width: 768px) {
  /* For mobile phones: */
                
               
    
                .frau        {
    
                        display:none;
    
                    }
    
                .mann        {
    
                        width:7em;
                        margin-left:1em;
                        border:0.3em solid #fbddc8;
                        margin:1em;
                    }
    
    
                .mann2        {
    
                        width:7em;
                        margin-left:1em;
                        border:0;
                        margin:1em;
                    }
    
    
    
                .artikel    {
                    
                        width:2em;
                        float:left;
                        border:0.1em solid #fbddc8;
                        padding-right:0.5em;
                        padding-left:0.5em;
                        padding-bottom: 0.5em;
            
                        
                    
                    }
    
                .figur      {
                    
                        width:10vw;
                        float:left;
                        margin:0.5em;    
                    
                    }
    
                .artikel_blog    {
                    
                        width:3em;
                        float:left;
                        border:0.1em solid #fbddc8;
                        margin:0.3em;
                        margin-top: 1em;
            
                        
                    
                    }
        
                .mann-kleiner {
                
                        width:4em;
                        margin-left:1em;
                        float:right; 
                        border:0.3em solid #fbddc8; 
                        font: 1.5rem 'cochin';
                    
                    }
    
                .frau-kleiner {
                
                        width:4em;
                        margin-left:1em;
                        float:right; 
                        border:0.3em solid #fbddc8; 
                        font: 1.5rem 'cochin';
                    
                    }
    
           
    
    
    
    
    
                .flex-container-row {
                    
                        display:flex;
                        flex-direction: column;
                        
                    
                    }
    
    
                .flex-container {
                    
                        max-width:100%;
                    
                    
                    }
    
    
                .flex-box-info {
                    
                    max-width:100%;
                    padding-bottom:1em;
                    column-gap:20em;
                    }
    
                .flex-navioben      {
    
                border-left:0.2em solid #AC9393;
                border-right:0.2em solid #AC9393;
                border-radius:0.2em;
                background-color:#efd4c5;
                max-width:  60em;
                margin-bottom:2em;
                padding:0em;
                margin:auto;
                margin-top:0em;
                

    
                }
    
                .textnavi     {
            
                    position:relative; 
                    font-size: 0.9rem;
                    color:black;
                    text-align:left;
                    padding:0;
                    margin:0;
        
            
                }
                .flex-artikel   {
                    
                    display:flex;
                    align-items: center;
                    gap:2px;
                    padding-bottom:1em;
        
        
                    }
    
                .ul  {
    
                    margin:0em;
                    padding: 0em;
                    gap: 0.01em;
                    list-style:none;
                    
                    }
    
                .bottom {
                    
                    display:none;
                    
                    }
                    
                
                form  {
                    display:flex;
                    justify-content:center;
                    align-items: center;
                    flex-direction: column;
                    width:100%;
                    
                   
                    

                    }
    
    
                input#absender,
                textarea {
            
        
                    width:20em;
                    border:5em solid black;
                    margin-bottom: 1em;
                    margin-left:0em;
        
                    }
    
              
    
                .br-resp    {
                    
                    display:none;
                    
                    
                    }
    
                .rechts         {
    
                    float:none;
                    width: 10em;  
                    margin: 1em;
                    margin-left:50%;
                    transform:translate(-50%);
                    border: 0.1em solid black;
    
                    } 
    
                .links          {
    
                    float:none;
                    width: 10em; 
                    margin: 1em;
                    margin-left:50%;
                    transform:translate(-50%);
                    border: 0.1em solid black;
    
                    } 
    
                /*ul*/.schwung      {
    
                    padding-left: 2.8em;
                    background-size: 2.5em;
                    margin: 0.1em;
    
                    }

                .pik            {
                
                    width:1.8em; 
                    height: 1.8em; 
                    padding: 0.1em;
                    vertical-align: text-bottom
                
                    }
    
    
                        }
        
         
                    
                    

@media only screen and (min-width: 768px) {
  
    
    
   
    
                .bottom-resp {
                    
                        display:none;
                    
                        }
    
               
    
                 .flex-artikel   {
                        
                     display:flex;
                     gap:5px;
                     padding-bottom:0.0em;
                     align-items: center;
        
        
                    }
    
                .flex-navioben      {
    
                border-left:0.5em solid #AC9393;
                border-right:0.5em solid #AC9393;
                border-radius:0.8em;
                background-color:#efd4c5;
                max-width:  60em;
                margin-bottom:2em;
                padding:0.2em;
                margin:auto;
                margin-top:0em;
                

                }
    
                 .textnavi     {
            
                position:relative; 
                font-size: 1.1rem;
                color:black;
                text-align:left;
                padding:0;
                margin:0;
        
            
                }
    
               .rechts         {
    
                float:right;
                width: 13em;  
                margin-left: 1em;
                border: 0.1em solid black;
    
                        } 
    
                .links          {
    
                float:left;
                width: 13em; 
                margin-right: 1em;
                border: 0.1em solid black;
    
                        } 
    
                .frau        {
    
                width:20em;
                border-left:0.3em solid #e7b796;
                margin-bottom:3em;
    
                }
    
                .mann        {
    
                width:15em;
                border:0.3em solid #fbddc8;
                margin:1em;
    
                }
    
    
                .mann2        {
    
                width:15em;
                border:0;
                margin:1em;
    
                }


    

                
                .mann-kleiner {
                
                        display: none;
                    
                }
    
                .frau-kleiner {
                    
                    
                        display:none;
                    
                }
    
    
    
                .artikel    {
                    
                        width:3.5em;
                        float:left;
                        border:0.1em solid #fbddc8;
                        padding:0.3em;
            
                        
                    
                    }
    
                .figur      {
                            
                        width:5rem;
                        float:left;
        
                            }
                       
    
                .artikel_blog    {
                    
                        width:6.5em;
                        float:left;
                        border:0.3em solid #fbddc8;
                        margin:0.2em;
                        margin-top: 1em;
            
                        
                    
                    }
    
                /*ul*/.schwung      {
    
                    padding-left: 5.5em;
                    background-size: 5em;
                    margin: 0.5em;
    
                    }
                
                .pik            {
                
                    width:1.5em;
                    height: 1.5em; 
                    vertical-align: text-bottom
                
                    }

                
                            }


.associate  {
    
        font-size:0.9rem;
        text-align:center;
        padding-bottom:1.5em;
    
    
        }

p.art      {
    
        font-family:'optima';
        font-size: 1.1rem;
        text-align:left;
    
        
}
                
body            {
                
                background-color:#FFE6D5;
    
                }
                                        
img.logo {
                    
                width:45%;
                height:auto;
               
                         
                }



.flex-container {
                
                
                display:flex;
                align-items: center;
                flex-direction:column;
                margin-bottom: 1.5em;
                margin-top: 1em;
            
    
                }

.flex-container-logo {
                
                
                display:flex;
                align-items: center;
                flex-direction:column;
                margin-bottom: 0em; 
                padding-bottom: 0em;
            
    
                }

.flex-container-row {
                    
                display:flex;
                flex-direction: row;
    
                }



.asso {
                text-align:center;    
                margin-bottom:2em;
                max-width:60em;
                border-top:0.1em solid gray;
                padding-top: 0.5em;
                
    
                }

.flex-oben      {
                
                max-width: 40em; 
                display:flex;
                align-items: center; 
                justify-content: center
                
    
    
                }

.flex-overflow {
        
                border-left: 0.1em dotted black;
                border-right: 0.1em dotted black;
                border-bottom: 0px;
                border-radius: 0.0em;
                background-color:white;
                max-width: 50em;
                max-height:50em;
                margin:auto;
                margin-bottom:1em;
                padding:0.3em;
                
    
    
                }

.flex-item-bottom   {
                
                position:fixed;
                bottom:1em;
    
                }

.flex-ueberschrift-h1     {
    
            
                background-color:#FFE6D5;
                margin:auto;
                padding:0.3em;
                border-radius:0.3em;
                text-align:left;
    

                } 

.flex-ueberschrift-h2     {
    
            
                background-color:#FFE6D5;
                margin:auto;
                padding:0.2em;
                margin-bottom:0.3em;
                border-radius:0.3em;
                text-align: left;

                } 


.flex-ueberschrift-blog     {
    
                background-color:#e0c8ad;
                margin:auto;
                margin-bottom:0.5em;
                padding:0.2em;
                border-radius:0.3em;
                text-align: left;
    
                }

.flex-ueberschrift2-blog     {
    
                background-color:#f1e7dc;
                margin:auto;
                padding:0.2em;
                border-radius:0.3em;
                text-align: left;
    
                }



.flex-box-info      {
    
                border-left:0.5em solid #AC9393;
                border-radius:0.5em;
                background-color:#efd4c5;
                max-width: 60em;
                margin-bottom:1em;
                padding:0.5em;
                margin:auto;
                margin-top:1em;

    
                }




.flex-box2      {
    
                border-left:0.3em solid #e7b796;
                border-radius:0.5em;
                background-color: #fbddc8;
                max-width: 50em;
                margin:auto;
                padding:0.2em;
                
    
                }

.flex-box1      {
    
                border-left:0.3em solid #e7b796;
                border-radius:0.5em;
                background-color: #fcd3b7;
                max-width: 60em;
                margin:auto;
                padding:0.2em;
                margin-top:2em;
                
    
                }



.flex-datenschutz   {
    
                border-left:0.3em solid #e7b796;
                border-radius:0.5em;
                background-color: #fcd3b7;
                margin:auto;
                padding:0.2em;
                margin-top:1em;
                overflow-y:auto;
                max-height: 50em;
                max-width: 50em;
    
    
                }

.flex-box-blog      {
    
                border-left:0.3em solid #ac8a65;
                border-radius:0.5em;
                background-color: #ffe6ca;
                max-width: 50em;
                margin:auto;
                padding:0.2em;
                margin-top:1em;
                
    
                }

.flex-kontakt      {
    
                border-left: 0.3em solid #eeccbb;
                border-right: 0.3em solid #eeccbb;
                border-radius: 0.5em;
                background-color:#FFE6D5;
                max-width: 50em;
                min-width: 10em;
                padding: 0.1em;
                margin-top: 3em;
                margin-bottom: 3em;
    

                } 


.

.hr-trennung    {
                    
                width: 90%;
                color: orange;
                margin-top:0;
                padding-top:0;

              
                }





.bottom         {
                margin-left:50%;
                transform:translate(-50%);
                position:fixed;
                bottom:1em;
                border:0.1em solid black;
                border-radius:0.5em;
                padding:0.2em;
                background-color:#e7b796;
                
    
                }

.bottom-resp    {
                margin-left:50%;
                transform:translate(-50%);
                position:fixed;
                bottom:0.5em;
                border:0.01em solid sandybrown;
                border-radius:0.5em;
                padding:0.2em;
                background-color:gainsboro;
                
    
                }


.button         {
    
                width:1.0em;
                vertical-align: top;
    
                }



.bildkat        {
                
                float:right;
                border:0.3em solid #fbddc8;
                margin:1em;
    
                }







.kategorie      {
    
                
                border-left:0.3em solid #e7b796;
                border-radius:0.5em;
                background-color: #fbddc8;
                max-width: 40em;
                margin:auto;
                padding:0.2em;
                margin-top:2em;
                margin-bottom:2em;
    
                }




    
.img-prod       {
    
                display:block;
                margin:auto;
                width:5em;
    
    
                }

.img-face       {
                
            
                width:1.5rem;
                padding-right: 1rem;
                
    
                }


.img-insta      {
    
                width:1.5rem;
    
                }





h1      {
            
         position:relative;
         font-family:'cochin';
         font-size: 1.5rem;
         text-align:auto;
         padding:0em;
         margin:0em;
            
        }

h2      {
            
         position:relative;
         font-family:'cochin';
         font-size: 1.4rem;
         text-align:center;
         padding:0em;
         margin:0em;
         
            
         }

h3       {
            
         position:relative;
         font-family:'cochin;
         font-size: 1.3rem;
         text-align:center;
         padding:0em;
         margin:0em;
         background-color:#FFE6D5;
         
            
}

p       {
            
         position:relative;
         font-family:'optima';
         font-size: 1.2rem;
         text-align:left;
        
            
}

.klein     {
            
         position:relative; 
         font-size: 0.9rem;
         color:black;
         text-align:left;
         padding:0;
         margin:0;
        
            
}

.kleiner      {
            
         position:relative;
         font-size: 1.1rem;
         color:black;
         text-align:left;
         padding:0;
         margin:0;
        
            
}


span       {
            
         position:relative;
         font-family:'optima';
         font-size: 1.2rem;
         text-align:left;
        
            
}

span.info       {
            
         position:relative;
         font-family:'optima';
         font-size: 1.2rem;
         text-align:left;
        
            
}

span.klein      {
    
        font-size:0,7em;
    
}


p.art      {
    
        font-family:'optima';
        font-size: 1.1rem;
        text-align:left;
    
        
}


trenn       {
    
        border-color: orange; 
        width:50%; 
        border-width:0.05em;
    
    
}


.bsp   {
    
        text-align:center;
        font-size:0.5rem;
    
}


.bew   {

        font-size:0.9rem;
    
}

.butt  {
    
        font-weight:bold; 
        text-align:center;
}

.beschr {
    
        font-size:1rem; 
        
    
    
}

.amz {
    
        width:12em;
    
}

.prod1 {
    
        margin:0.5em;
        float:left
    
}


.prod2 {
    
        background-color:#FFE6D5;
        padding:0.1em;
    
}

ul      {

        padding-left:5.5em;
    
        }

/*ul*/.schwung      {
    
        
        padding-right; 0.2em;
        list-style: none;
        background-repeat: no-repeat;
        background-position: left;
    
            }


li       {
    
        font:1.3rem 'cochin';
    
    
        }


.p-bewert {
    
        text-align:left;
        font-size:0.85rem;
        border-bottom:0.1em dotted black;
    
        }





nav ul  {
    
	    margin: 0;
	    padding: 0;
        gap: 0.2em;
	    list-style: none;
	    font: 0.8rem 'tahoma';
    
        }

div.flex ul {
    
	    display: flex;
        margin:auto;
    
        }

div.flex li1 {
    
        flex:auto;
        /* Items gleichmäßig breit */
        display: block;
        height: 100%;
        padding: 0.1em 0.3em;
        text-decoration: none;
        box-sizing: border-box;
        border:0.1em solid black;
        border-radius: 0.3em;
        background-color: white;
        text-align: center;
        align-content: center;
        }

div.flex li {
    
        flex:auto;
        /* Items gleichmäßig breit */
        display:block;
        box-sizing: border-box;
        height: 100%;
        padding: 0.1em 0.1em;
        text-decoration: none;
        border:0.1em solid black;
        border-radius: 0.3em;
        background-color: floralwhite;
        text-align: center;
        align-content: center;
        
        }

div1 a   {
    
        display: block;
        height: 100%;
        padding: 0.1em 0.3em;
        text-decoration: none;
        box-sizing: border-box;
        border-radius: 0.3em;
        text-align: center;
        align-content: center;
    
        }



a:link
         {

         text-decoration:none;
         font-family:'optima';
         font-size:1.2rem;
         color: black;

         }


a:visited
         {

         text-decoration:none;
         font-family:'optima';
         font-size:1.2rem;
         color:#333366;

         }

a:hover  {

         text-decoration:underline;
         font-family:'optima';
         font-size:1.2rem;
         color:#660000;
         background-color: #e7b796;

         }


a:active {

         text-decoration:none;
         font-family:'optima';
         font-size:1.2rem;
         color:#000000;

         }


/* artikel links */


a.art:link
         {

         text-decoration:none;
         font-family:'optima';
         font-size:1.1rem;
         color:#333366;

         }


a.art:visited
         {

         text-decoration:none;
         font-family:'optima';
         font-size:1.1rem;
         color:#333366;

         }

a.art:hover  {

         text-decoration:underline;
         font-family:'optima';
         font-size:1.1rem;
         color:#660000;

         }


a.art:active {

         text-decoration:none;
         font-family:'optima';
         font-size:1.1rem;
         color:#000000;

         }

/* navi link */


a.navi:link
         {

         text-decoration:none;
         font-family:'optima';
         font-size:0.9rem;
         color:#333366;

         }


a.navi:visited
         {

         text-decoration:none;
         font-family:'optima';
         font-size:0.9rem;
         color:#333366;

         }

a.navi:hover  {

         text-decoration:underline;
         font-family:'optima';
         font-size:0.9rem;
         color:#660000;

         }


a.navi:active {

         text-decoration:none;
         font-family:'optima';
         font-size:0.9rem;
         color:#000000;

         }




#Kontaktformular     {
            display:flex;
            justify-content:center;
            align-items: center;
            flex-direction: column;
            margin-left:50%;
            transform:translate(-50%);
            
            padding-top: 1em;
            border: 0.3em solid #eeccbb;
            border-radius:0.5em;
            background-color: #fcd3b7;
            width:75%;
          
}

form     {
            display:flex;
            justify-content:center;
            align-items: center;
            flex-direction: column;
            margin-left:50%;
            transform:translate(-50%);
            
            width:100%
           
          
}





label    {

         font-family:'optima';
         font-size:1.1rem;
         text-align: center;
         display: block;
         cursor: pointer; /* ; wird zur Hand */

         }

input#email,
textarea {
            
        
         width: 10rem;
         border:0.1em solid black;
         margin-bottom: 1em;
         height:2em;
        
        
         }

input#name,
textarea {
            
        
         width: 15rem;
         border:0.1em solid black;
         margin-bottom: 1em;
         height:2em;
        
        
         }

input#nachricht,
textarea {

         
         width:20rem;
         border:0.1em solid black;
         height:20em;
        
         }


input:focus,
textarea:focus
         {

         background-color: #d9d9d9;

         }