@font-face {
    font-family: 'ES RebondGrotesque';
    src: url('../schrift/ESRebondGrotesque-Regular.woff2') format('woff2'),
         url('../schrift/ESRebondGrotesque-Regular.woff') format('woff');
         font-weight: 100;

}

.intro {

    background-color: white;
    margin: 0;
    font-weight: 100;

}

.link {

    color: black;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;

}

.link:hover {

    text-decoration-line: underline;
    text-decoration-style: wavy;

}

.projektbilder--startseite {

    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0px 25px 0px 25px;
    
}

.projektbilder {

    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    
}

/* body */

.body {

    background-color: white;
    margin: 0;
    border: 0;
    transition: background-color 2s;

}

.body--croco {

    background-color: rgb(103,145,73);
    margin: 0;
    border: 0;

}

.body--fleisch {

    background-color: rgb(159,75,73);
    margin: 0;
    border: 0;

}

.body--fullybooked {

    background-color: rgb(182,140,72);
    margin: 0;
    border: 0;

}

.body--musik {

    background-color: rgb(1,165,156);
    margin: 0;
    border: 0;

}

.body--zeitung {

    background-color: rgb(119,142,70);
    margin: 0;
    border: 0;

}

.body--genf {

    background-color: rgb(194,105,89);
    margin: 0;
    border: 0;

}

.body--typolexikon {

    background-color: rgb(24,116,167);
    margin: 0;
    border: 0;

}

.body--covid {

    background-color: rgb(138,163,80);
    margin: 0;
    border: 0;

}

.body--grannysdoll {

    background-color: rgb(155,113,75);
    margin: 0;
    border: 0;

}

.body--shapes {

    background-color: rgb(183,85,124);
    margin: 0;
    border: 0;

}

.body--waves {

    background-color: rgb(48,118,143);
    margin: 0;
    border: 0;

}

.body--weltklasse {

    background-color: rgb(228,171,93);
    margin: 0;
    border: 0;

}

.body--nein {

    background-color: rgb(0,118,166);
    margin: 0;
    border: 0;

}

.body--kochbuch {

    background-color: rgb(159,159,159);
    margin: 0;
    border: 0;

}

.body--monat {

    background-color: rgb(200,200,200);
    margin: 0;
    border: 0;

}

.body--sommer {

    background-color: rgb(255,143,12);
    margin: 0;
    border: 0;

}

.body--welcome {

    background-color: rgb(227,161,84);
    margin: 0;
    border: 0;

}

.body--tea {

    background-color: rgb(130,23,23);
    margin: 0;
    border: 0;

}

.body--aboutme {

    background-color: rgb(134,151,71);
    margin: 0;
    border: 0;

}

    /* phone */
   @media (max-width: 599px) {

    .intro {

        font-size: 29px;
        font-family: 'ES RebondGrotesque';
        padding: 20px 30px 20px 30px;
        
    }

    .projektbilder__link {

        width: 100%;

    }

    .projektbilder__image {

        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .einstiegsbild {

        width: 100%

    }

    .bilder--25 {

        width: 50%;

    }

    .bilder--33 {

        width: 50%;

    }

    .bilder--50 {
   
        width: 100%;
    
    }

    .bilder--100 {
   
        width: 100%;
    
    }
    
    .textraster {

        display: flex;
        flex-wrap: wrap;
        background-color: white;
        padding: 20px 0px 20px 30px;
    
    }

    .textraster__box {

        width: 100%;
        font-family: 'ES RebondGrotesque';
        font-size: 16px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-right: 30px;

    }

    .info__box {

        width: calc(50% - 30px);
        font-size: 12px;
        font-family: 'ES RebondGrotesque';
        margin-right: 30px;
        line-height: 40%;
        margin-top: 120px;

    }

    .projektname {
        
        width: 100%;
        background-color: white;
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--covid {
        
        font-family:'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(138,163,80);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--croco {
        
        font-family:'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(103,145,73);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--fleisch {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(159,75,73);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--fullybooked {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(182,140,72);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--genf {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(194,105,89);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--grannysdoll {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(155,113,75);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--shapes {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(183,85,124);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--typolexikon {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(24,116,167);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--waves {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(48,118,143);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--weltklasse {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(228,171,93);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }
    
    .projektname--zeitung {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(119,142,70);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;

    }
    
    .projektname--musik {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(1,165,156);
        padding-bottom: 30px;
        font-size: 13px;  
        margin: 0;  
        
    }
    
    .projektname--aboutme {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(134,151,71);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }

    .projektname--nein {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(0,118,166);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }

    .projektname--kochbuch {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(159,159,159);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }

    .projektname--monat {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(200,200,200);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }

    .projektname--sommer {
        
        font-family: 'ES RebondGrotesque';
        width: 100%;
        background-color: white;
        color: rgb(255,143,12);
        padding-bottom: 30px;
        font-size: 13px;
        margin: 0;
        
    }

    }

    /* laptop */
    @media (min-width: 600px) {
        
        .intro {

            font-size: 50px;
            font-family: 'ES RebondGrotesque';
            padding: 30px 50px 30px 50px;
            
        }
        
        .projektbilder__link {

            width: 25%;
    
        }
    
        .projektbilder__image {
    
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
    
        }

        .bilder--25 {

            width: 25%;
    
        }

        .bilder--33 {

            width: 33.33%;
    
        }
    
        .bilder--50 {
       
            width: calc(50%);
        
        }

        .bilder--100 {
       
            width: 100%;
        
        }

        .einstiegsbild {

            width: 50%;
            display: block;
            margin-left: auto;
            margin-right: auto;

        }
        
        .textraster {

            display: flex;
            flex-wrap: wrap;
            background-color: white;
            padding: 30px 0px 30px 50px;
        
        }

        .textraster__box {
    
            width: calc(50% - 50px);
            font-family: 'ES RebondGrotesque';
            font-size: 27px;
            display: flex;
            flex-flow: column wrap;
            margin-right: 50px;
    
        }

        .text {

            margin-top: 0px;
            margin-bottom: 30px;

        }

        .info__box {
    
            width: calc(25% - 50px);
            font-size: 18px;
            font-family: 'ES RebondGrotesque';
            margin-right: 50px;
            line-height: 40%;
            margin-top: 120px;

        }

        
        .projektname {
        
            width: 100%;
            background-color: white;
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;

        }
        
        .projektname--covid {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(138,163,80);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;

        }
        
        .projektname--croco {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(103,145,73);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;

        }
        
        .projektname--fleisch {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(159,75,73);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--fullybooked {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(182,140,72);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--genf {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(194,105,89);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--grannysdoll {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(155,113,75);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
           
        .projektname--shapes {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(183,85,124);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--typolexikon {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(24,116,167);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--waves {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(48,118,143);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--weltklasse {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(228,171,93);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--zeitung {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(119,142,70);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--musik {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(1,165,156);
            padding-bottom: 70px;
            font-size: 18px; 
            margin: 0;   
            
        }
        
        .projektname--aboutme {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(134,151,71);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
       
        .projektname--nein {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(0,118,166);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }

        .projektname--kochbuch {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(159,159,159);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }

        .projektname--monat {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(200,200,200);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }

        .projektname--sommer {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(255,143,12);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }

    }

      /* pc */
      @media (min-width: 1800px) {
        
        .intro {

            font-size: 50px;
            font-family: 'ES RebondGrotesque';
            padding: 30px 50px 30px 50px;
            
        }
        
        .projektbilder__link {

            width: 25%;
    
        }
    
        .projektbilder__image {
    
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
    
        }

        .bilder--25 {

            width: calc(25%);
    
        }

        .bilder--33 {

            width: 33.33%;
    
        }
    
        .bilder--50 {
       
            width: calc(50%);
        
        }

        .bilder--100 {
       
            width: 100%;
        
        }

        .einstiegsbild {

            width: 40%;
            display: block;
            margin-left: auto;
            margin-right: auto;

        }
        
        .textraster {

            display: flex;
            flex-wrap: wrap;
            background-color: white;
            padding: 30px 0px 30px 50px;
        
        }

        .textraster__box {
    
            width: calc(50% - 50px);
            font-family: 'ES RebondGrotesque';
            font-size: 27px;
            display: flex;
            flex-flow: column wrap;
            margin-right: 50px;
    
        }

        .text {

            margin-top: 0px;
            margin-bottom: 30px;

        }

        .info__box {
    
            width: calc(25% - 50px);
            font-size: 18px;
            font-family: 'ES RebondGrotesque';
            margin-right: 50px;
            line-height: 40%;
            margin-top: 120px;

        }

        
        .projektname {
        
            width: 100%;
            background-color: white;
            padding-bottom: 70px;
            font-size: 18px;
            
        }
        
        .projektname--covid {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(138,163,80);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;

        }
        
        .projektname--croco {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(103,145,73);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;

        }
        
        .projektname--fleisch {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(159,75,73);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--fullybooked {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(182,140,72);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--genf {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(194,105,89);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--grannysdoll {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(155,113,75);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
           
        .projektname--shapes {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(183,85,124);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--typolexikon {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(24,116,167);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--waves {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(48,118,143);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--weltklasse {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(228,171,93);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--zeitung {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(119,142,70);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }
        
        .projektname--musik {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(1,165,156);
            padding-bottom: 70px;
            font-size: 18px; 
            margin: 0;   
            
        }
        
        .projektname--aboutme {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(134,151,71);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }

        .projektname--nein {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(0,118,166);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }

        .projektname--kochbuch {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(159,159,159);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }

        .projektname--monat {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(200,200,200);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }

        .projektname--sommer {
            
            font-family: 'ES RebondGrotesque';
            width: 100%;
            background-color: white;
            color: rgb(255,143,12);
            padding-bottom: 70px;
            font-size: 18px;
            margin: 0;
            
        }

    }