/*@font-face {
    font-family: diatype;
    src: url('../woff/ABCDiatypeEdu-Regular.woff') format("woff");
}*/



/* Farben */

:root {
    --hellgrau: rgb(231, 231, 231);
    --buttongrau: rgb(196, 196, 196);
    --inaktivesgrau: rgb(207, 207, 207);
    --mittelgrau: rgb(117, 117, 117);
    --dunkelgrau: rgb(43, 43, 43);
    --dunkelgrau-rgb: 43, 43, 43;
    --weiss: white;
    --schwarz: black;
    --blau: rgb(0, 0, 255);
}

/* allgemeines styling */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: arial;
    letter-spacing: 1%;
    text-rendering: optimizeLegibility;
    font-style: normal;
}

body {
    background-color: var(--dunkelgrau);
}

/* entfernt list styles */
ul, ol {
    list-style: none;
}

/* entfernt link styles */
a {
    text-decoration: none;
    color: inherit;
}


*::-webkit-scrollbar {
  display: none;
}


html {
  scrollbar-width: none; 
}


body {
  -ms-overflow-style: none;
}

/* Header Snippet Styling */    



.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 1.5vw;
    position: fixed;
    width: 100vw;
    z-index: 9999;
    /* background-color: var(--dunkelgrau); */
}

#verlauf {
    background-image: linear-gradient(
  to bottom,
  rgba(var(--dunkelgrau-rgb), 1) 0%,
  rgba(var(--dunkelgrau-rgb), 0) 80%
);
}

.logo {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;  
}

.header h1, .menu  {
    /* font-size: 2.5rem; */
    /* background-color: var(--hellgrau); */
    /* padding: 0.3vw 1vw 0.3vw 1vw; */
    /* border-radius: 5px; */
    /* background-color: rgb(159, 159, 159); */
    font-weight: lighter;
    /* color: var(--schwarz); */
    color: var(--hellgrau);
    letter-spacing: +0.03rem;
    /* background-color: var(--buttongrau); */
    padding: 0.8vw;
    padding-left: 1.2vw;
    padding-right: 1.2vw;
    font-size: 1.4rem;
    border-radius: 25px;
}

.header h2 {
    font-size: 1.2rem;
    font-weight: normal;
    color: var(--blau);
}


.menu ul{
    display: flex;
    flex-direction: row;
    gap: 2vw;
}

.menumobil {
    display: none;
}

.burger-menu {
    display: none;
}



/* Footer Snippet Styling */

.footer ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap:1vmax;
        font-size: 1.4rem;
}

.footer {
    padding-top: 12vmax;
    padding-bottom: 1vw;
    width: 100vw;   
    z-index: 9999;
    position: relative;
        color: var(--hellgrau);
}


/* Seitenlayout Styling */

.seitenlayout {
    padding-top: 8vmax;
    display: grid;
    grid-template-columns: 17% 83%;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-bottom: 1vw;
}

.mobilbuttonfilterleiste {
    display: none;
}





/* Filterseitenleistestyling */




.filterscroll {
    position: fixed;
    height: 100%;
    overflow: scroll;
    width: 100%;
    top:0;
}


.filter {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    justify-content: flex-start;
    margin-top: 8vw;
    position: relative;
    margin-bottom: 20vh;
}

.filter a {
    background-color: var(--mittelgrau);
    /* padding-top: 0.65vw;
    padding-bottom: 0.8vw;
    padding-left: 1.2vw;
    padding-right: 1.2vw;
    font-size: 1.4rem; */
    border-radius: 25px;
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;
    padding-left: 1.2vw;
    padding-right: 1.2vw;
    font-size: 1.4rem;
}

.filter a:hover {
    background-color: var(--buttongrau);
}


.filterbutton a.active {
    color: var(--schwarz);
}

.filterbutton a:not(.active) {
        color: var(--schwarz);
}






/* projekte-grid Styling */

.projekte-grid {
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    gap: 1vw;
    height: auto;
    position: relative;
    padding-right:1vw;
    width: auto;
    padding-bottom: 5vmax;
}

.projekte-grid li {
    width: auto;
    background-color: var(--hellgrau);
    /* border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px; */
    position: relative;
    border-radius: 12px;
}

.projekte-grid img {
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.projekte-grid figcaption {
    padding: 1vw;
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1vw;  
}

.teaser {
        color: var(--mittelgrau);
}