/* ---------------------------------------------------------- */
/*                      Variablen                             */
/* ---------------------------------------------------------- */
:root {
  --text-dark: #212121;
  --primary-light: #f7fff0;

  --card-wild-1: #f7d1c3;
  --card-wild-2: #FFE6C9;
  --card-wild-3: #FBFFA7;
  
  --card-welt-1: #A7F5FF;
  --card-welt-2: #C9E2FF;
  --card-welt-3: #C3F7DD;

  --card-wissen-1: #FA98B7;
  --card-wissen-2: #FFC9DC;
  --card-wissen-3: #F7C8C3;

  --card-wow-1: #FFDD9B;
  --card-wow-2: #DBF7C3;
  --card-wow-3: #ffe13a;

  --category-wild: #fff8f0;
  --category-wissen: #fff0fb;
  --category-welt: #e6fdff;
  --category-wow: #fefff0;

}

/* ---------------------------------------------------------- */
/*                    Kategorie – Header                      */
/* ---------------------------------------------------------- */

.category-top {
    width: 100%;
    display: flex;
    align-items: center; 
    padding: 40px 0px;
    
}

.left {
    width: 75%;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-left: 15px;
}

.category-icon {
    font-size: 2.5rem;
    
    width: 70px;
    height: 70px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wild { background: var(--category-wild);}
.wissen {background: var(--category-wissen);}
.welt {background: var(--category-welt);}
.wow {background: var(--category-wow);}


.category-top h1 {
    font-size: clamp(22px, 2rem, 2.2vw);
    font-weight: 700;
    color: var(--primary-light);
    margin: 0;
}

.navbar{
    width: 25%;
    height: 70px;
}

.nav-buttons {
    top: 10px;
}

/* ---------------------------------------------------------- */
/*                         Facts Grid                         */
/* ---------------------------------------------------------- */
.fact.category-wild {
    --color-0: var(--category-wild);
    --color-1: var(--card-wild-1);
    --color-2: var(--card-wild-2);
    --color-3: var(--card-wild-3);
}

.fact.category-wissen {
    --color-0: var(--category-wissen);
    --color-1: var(--card-wissen-1);
    --color-2: var(--card-wissen-2);
    --color-3: var(--card-wissen-3);
}

.fact.category-welt {
    --color-0: var(--category-welt);
    --color-1: var(--card-welt-1);
    --color-2: var(--card-welt-2);
    --color-3: var(--card-welt-3);
}

.fact.category-wow {
    --color-0: var(--category-wow);
    --color-1: var(--card-wow-1);
    --color-2: var(--card-wow-2);
    --color-3: var(--card-wow-3);
}
.facts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vw;
 
}

.fact {
    text-decoration: none;
    
    border-radius: 18px;
    padding: 20px 20px;
    background: var(--color-0);


    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
    text-align: center;

    display: flex;
    align-items: center;
    

    width: clamp(200px,20vw,246px);   
    aspect-ratio: 1;
}

/*                     random Farben                      */
.facts-grid .fact:nth-child(2n) {background: var(--color-1);}
.facts-grid .fact:nth-child(3n) {background: var(--color-2);}
.facts-grid .fact:nth-child(5n) {background: var(--color-3);}

/* ---------------------------------------------------------- */
/*                           MOBILE                           */
/* ---------------------------------------------------------- */
@media (max-width: 800px) {

    .page-content {
        width: 70%;
    }

    .left {
        width: 25%;
        justify-content: center;
    }

    .navbar{
        width: 75%;
        height: 70px;
        margin-left: 6vw;
    }

    .nav-buttons{
        margin-top: 0px;
        flex-shrink: 1;
    }

    .category-top h1 {
        display: none;
    }

}