:root {
  --artseid: #82cec9;
  --weiss: #ffffff;
  --akzent: #d0eae7;

  --font-body: 'Inter', sans-serif;
  --spacing: 1rem;
  --radius: 0.5rem;
}





[data-theme="dark"] {
  --artseid: #ffffff;
  --weiss: #82cec9;
  --akzent: #d0eae7;
}





/*RESET*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}


body {
  font-family: 'inter', sans-serif;
  line-height: 1.5;
  background-color: var(--weiss);
  color: var(--artseid);
}






























body {
    margin: 0px;
    background-color: var(--artseid);
    overflow: hidden;
}



header {
    display: flex;
    flex-direction: row;
    padding: 1.5rem 3rem;
    align-items:center;
    gap: 6rem;
}


   
    .navi {
        display: flex;
        flex-direction: row;
        list-style: none;
        text-decoration: none;
        gap: 6rem;
    }


        .logo {
            width: 100px;
            padding: 10px;
        }


        .navi li {
            color: var(--weiss);
            text-transform: uppercase;
            font-weight: bold;
            font-size: 1.25rem;
            transition-duration: 0.5s;
        }

            .navi li:hover {
                color: var(--akzent);
            }
        

            





.hero {
    background-color: white;
    min-height: 80vh;
    position: relative;
    overflow: hidden;
    align-items: center;
    
}

    .hero img {
    position: absolute; 
    pointer-events: none; 
    user-select: none; 
    z-index: 1; 
    overflow: visible;
    }

        .photoshop {
            width: 8vw;
            max-width: 20vh;
            height: auto;
            position: absolute;
            top: 16%;
            left: 6%;  
        }

        .pinsel {
            width: 10vw;
            height: auto;
            position: absolute;
            top: 45%;
            right: 6%;         
            
        }

        .ai {
            width: 5vw;
            height: auto;
            position: absolute;
            bottom: 6%;
            left: 30%;
        }

        .id {
            width: 8vw;
            height: auto;
            position: absolute;
            top: 16%;
            right: 12%; 
        }

        .pc {
            width: 15vw;
            height: auto;
            position: absolute;
            top: 50%;
            left: 8%;
            rotate: 100px;
        }

        .buch {
            width: 8vw;
            height: auto;
            position: absolute;
            bottom: 16%;
            right: 6%; 
        }

    



    .cta {
            height: auto;
            position: absolute;
            bottom: 20vh;
            right: 30vw;
            left: 30vw
    }    

        .cta .welcome {
            width: 25vw;
            height: auto;
            position: relative;
            bottom: 13vw;
            right: 3vw;
        }

        .cta .blume1 {
            width: 7vw;
            height: auto;
            position: relative;
            bottom: 0vw;
            right: -3vw;
        }

        .cta .medel {
            width: 36vw;
            height: auto;
            position: relative;
            top: 14.6vw;
            right: -10vw;

        }

        .suchleiste {
            display: flex;
            width: 40vw;
            height: 6vh;
            border: 3px solid var(--artseid);
            color: var(--white);
            overflow: visible;
            background-color: var(--akzent);
        }

        .suchleiste input[type="search"] {
        flex: 1;
        border: none;
        padding: 0.5rem 1rem;
        font-size: 2vh;
        outline: none;
        }





.main-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2rem;
}