/* =====================================================
   VARIABLEN
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root{
    --background: #f3efeb; /* efe9e4 f3efeb */ 
    --background-rgb: 243, 239, 235;
    --background-dark: #2b2523;
    --background-dark-rgb: 43, 37, 35;
    --textdark: #2b2523;
    --textlight: #fffaf2;
    --boxcolor: #f3efeb; /* ffffff */
    --accent: #5e5343;
    --accent-rgb: 94, 83, 67;
    --accent-two: #dd813a;
    --accent-three: #8a4918;
    --accent-three-rgb: 138, 73, 24;
    --accent-dark: #106701;
    --accent-dark-rgb: 16, 103, 1;
    --theme: #78a889;
    --theme-rgb: 120, 168, 137;
    --title: #1a1919;
    --green-dark: #24382c;
    --green-dark-rgb: 36, 56, 44;
}

html{
    scroll-behavior:smooth;
    overflow-x: hidden;
}
body{
    font-family:"Jost", sans-serif;
    overflow-x: hidden;
    background: var(--background);
    color: var(--accent);
    line-height:1.7;
    font-size: 18px;
}





/* =====================================================
   SEKTIONEN
===================================================== */
section{
    padding:100px 25px;
    max-width:1100px;
    margin:auto;
    animation:fadeUp .9s ease;
}

section h2{ 
    margin-bottom: 30px;
    color:var(--accent-three);
    font-size: 3.2rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    line-height: 1.1;
}

section h4{
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 10px;
}

/* nur direktes Kind jeder Sektion hat ein margin nach unten*/
section > p {
    margin-bottom: 15px;
}


.two-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

/* Allgemein */



button{
    background-color: transparent;
    border-radius:8px;
    font-size: 20px;
    padding: 8px 9px;
    font-weight: 700;
}


.signature{
    color: var(--accent-dark);
    font-size: 3rem;
    font-family: 'Italianno', cursive;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}
@layer defaults {
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }

    ul {
        margin-left: 25px;
    }

    section h3{
        color:var(--accent-dark);
        font-size:1.5rem;
        margin-bottom:10px;
        margin-top: 2px;
        line-height: 1.15;
    }

    section h5{
        color:var(--accent-two);
        font-size:1.5rem;
        margin-bottom:10px;
        margin-top: 2px;
        line-height: 1.15;
    }

    p{
        line-height: 1.5;
    }

    a{
        text-decoration: none;
        color: var(--textdark);
        font-weight: 700;
        transition: 0.3s;
        transition: 0.3s ease;
    }

    a:hover{
        color: var(--accent);
    }
}

/* =====================================================
   CARD
===================================================== */
.card-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));
    gap:35px;
}
.card{
    background:var(--boxcolor);
    padding:25px;
    border-radius:20px;
    box-shadow: 0 5px 7px rgba(var(--accent-three-rgb),.3);
    border: 2px solid rgba(var(--accent-three-rgb),.2);
    transition:.35s;
    display: block;
    color: inherit;
     text-decoration: none;
}

.card-grid img{
    width:100%;
    max-height: 200px;
    object-fit:cover;
    border-radius:13px;
}



.ulBoxes{
  
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; 
}
.ulBoxes li{
    margin-left: 25px;
    line-height: 1;
}





/* =====================================================
   QUOTE
===================================================== */
.zitat {
    margin-top: 20px;
    padding: 20px;
    background: var(--light);
    border-left: 5px solid var(--accent);
    font-style: italic;
    color: var(--textdark);
}
.zitat strong {
    display: block;
    color: var(--accent);
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-style: normal;
}





/* =====================================================
   ANIMATIONEN
===================================================== */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-50px);
    }
    to{
        opacity:1;
        transform:none;
    }

}


@media(max-width:1024px){
    .two-columns{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    
    section h2{
        font-size:2.4rem;
    }
    section h4{
        font-size: 1.5rem;
    }
    .card{
        padding:25px;
    }
}