html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


h2  {margin-top:15px!important;}
h2, h3, :target,
h2:target,
h3:target,
h4:target,
p:target  {
  scroll-margin-top: 150px!important; /* Abstand vom fixierten Balken */
}


  
        body {
            margin: 0; 
            padding: 0;
            color: #555;  
            font-family: 'Open Sans', sans-serif;
            font-weight:300;
            font-size: 85%;
            line-height: 120%;
            background: white;
            }
         p, li {
            font-size: 1.3em;
            line-height:1.4em; 
            font-weight:300; 
             font-size: 17.6px;
             line-height: 26.4px;
             color: #555; 
        }
        strong {
            font-weight: bold; 
            }   
         a {
            color:#000;
             text-decoration: none;
            } 
        h1,h2, h3, h4, h5, h6 {
            margin: 0px 0;
            font-family: 'Quicksand', sans-serif;
             font-weight: 300; 
}
        
        h2, h3 {font-size:2.4em;
            line-height: 2.5rem;
            color:#000;
           

        } 
        h2{font-size:3.3em;
            line-height: 3.6rem;
            text-align:center!important;
        } 
        h2 span{
            color:#fff;
            font-weight: bold;
        } 
        h4 {
            font-size: 1.8em;
            color: #fff;

        }



       .container {
           width:100%;
           padding: 0;
           margin: 0;
        }

       .green {
           background: #B4D067;
        }

        .inhalt {
            max-width: 1130px;
            margin: 0 auto;
            padding: 0;
            overflow: hidden
        }
        .oben {
            margin-bottom:-20px;
        }

        .logoblock {
            position:absolute;
            max-width: 1130px;
            margin: 40px auto 0 auto;
            
        }



        #logo {width:200px;}

        .blumen {
            z-index: 100;
            max-width: 1130px;
            position:relative;
            top:30px; right:0;
            
            margin: 0 auto;
            padding: 0px 0;
            text-align: right;
        }
        .mutter {width: 900px}
        .cta {margin-top:-20px; z-index: 50;}


        .blumen h1 {
            font-size: 4.5em;
            line-height: 1.09em;
            color: black;
        }
        #bloom {
        margin-top:-30px;
        }



        
        
        .hero {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 20px;
            line-height: 2.09em;
        
        }

        .farben .hero {
            padding: 0px!important;
            box-sizing: border-box;
        }


   .hero .nummer{display:blocK;
       background: url("images/app-kl.png") no-repeat;
       background-position: right center;
       min-width:200px;padding-right:30px;
       
        }
        

       
      
        .section {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding: 0px 0px;
        }

        .flex {
            flex: 1;
            min-width: 300px;
        }
        .text-block, .color-block {
            padding: 30px 0px;
            width: 100%;
        }
      .linie {
            border-bottom: 2px solid #b4d067;
        }
      .liniefff {
            border-bottom: 2px solid #fff;
        }
        
         .images, .box {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: 20px 0;  
        }
        .images div, .box div {
            padding: 10px;
            margin: 10px;
            flex: 1 1 10%;
            border:1px solid #fff;
        }
        .images img {
            width: 100%;
            height: auto;
        }
        
        .box .hero {
            padding:30px 25px;
        }
        .box .hero h4 {
            color:#000;
        }

        .box .hero.eins {
            background: none;
        }
            
        .box .hero.zwei {
            background: none;
        }
        .box .hero.zwei a {
           color:#fff; font-weight: bold;
        }
        .box .hero.drei {
            background: none;
        }



            


        
     
        
        .footer {
            width:100%;
            margin-top: 0px;
            border-top:2px solid #fff;
            background: #E0D8CE;
            text-align:center;
            padding:5px 0;
        }
        .footer p {
            padding: 0px 10px;
            color: #fff;
            text-align:center;
        }
        .footer a {
            color: #fff;
            text-decoration: none;
        }
        .flogo, .fblock {
            float:left;
            color:#555;
            text-align: left;
            margin:20px 25px 20px 0;
            font-size: 17.6px;
            line-height: 26.4px;
        }
         .fblock a {
             color:#555;
        }
         .fblock span {
             color:#000;
        }



    .viertel   {
        width:20%!important; 
        margin:0px 1.8% 20px 0!important;
        float:left;
        height: 380px;
        border: 1px solid #B4D067;
     }
    .farben p {
        padding:0px 15px 10px 15px ;
     }
    .farben h4  {
        padding:20px 15px 0px 15px;
     }


       
  
.rot {background:#e7b178;}
.gelb {background:#de85a5;}
.orange {background:#d3908f;}
.kiwi {background:#B4D067;}

            


@media (max-width: 1180px){
        .inhalt {margin: 0 30px;}
      
}

        
@media (max-width: 1070px) { 
    
        #logo {width:150px;}
        .logoblock{
            display:block;
             position:relative;
            width: 100%;
            margin: 20px auto 0 auto;
            text-align:center;
        }
        .mutter {width: 100%}
        .cta {margin-top:0; }
        .blumen h1 {
            font-size: 4.0em;
            line-height: 0.9em;
        }

    
    
   
    .fblock, .flogo {
    width:100%; 
    text-align: center;
    }
       
   .farben .hero {
        flex: 0 0 45%; /* Genau 50% Breite = 2 Boxen pro Reihe */
    }
}


        @media (max-width: 768px) { 
         
         .logoblock {display:block;width:150px; margin:30px auto 0 auto;}
            h2{font-size:2.5em;
            line-height: 2.9rem;
        } 
        .blumen h1 {
            font-size: 3.9em;
        }
    
        } /* nicht löschen*/	


        @media (max-width: 680px) { 
        .blumen h1 {
            font-size: 3.5em;
        }} 

        @media (max-width: 600px) { 
        .blumen h1 {
            font-size: 3.2em;
        }} 	

         
     @media (max-width: 560px) { 
        .blumen h1 {
            font-size: 2.4em;
            line-height: 0.9em;
        }
         .mutter {margin-top:10px;}
         
        .farben .hero {
            flex: 0 0 100%; /* Genau 50% Breite = 2 Boxen pro Reihe */
            }

         

        }