/**************************************************
*** Datei: grid.css                             ***
*** Zweck: Responsive Grid-System für ESP       ***
*** Autor: Blacky                               ***
**************************************************/

/* Basis-Reset */
.grid-1,
.grid-2,
.grid-3 {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Einspaltiges Layout */
.grid-1 {
    grid-template-columns: 1fr;
}

/* Zweispaltig – responsive */
.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

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

/* Dreispaltig – responsive */
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Zweispaltig links breit, rechts schmal */
.grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

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

/* Zweispaltig links schmal, rechts breit */
.grid-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

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