/*
 * Grid-System
 *
 * Einfaches CSS-Grid für automatisch umbrechende Spaltenlayouts.
 *
 * Funktionen:
 * - Standard: automatische Spalten mit mindestens 100px Breite
 * - .grid--200 / .grid--300 / .grid--400 / .grid--500 setzen größere Mindestbreiten
 * - .grid--block erzwingt eine einspaltige Darstellung
 * - .grid--rounded rundet die Grid-Elemente ab
 * - Farb-Modifier nutzen globale CSS-Variablen aus der Haupt-CSS
 *
 * Hinweis:
 * Sonderfälle wie zentrierte letzte Zeilen, feste Spaltenanzahl,
 * Textausrichtung oder Card-Titel werden über das separate Cards-System gelöst.
 */


/*
 * Allgemeines CSS-Grid
 */
.grid {
    display: grid;
    gap: 20px; 
    width: 100%; 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    margin: 20px 0px;
}

.grid__element { padding: 20px; }

.grid--rounded .grid__element {
   -webkit-border-radius: 6px; 
   -moz-border-radius: 6px; 
   border-radius: 6px; 
}

.grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--400 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.grid--500 { grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); }
.grid--block { grid-template-columns: repeat(1, 1fr); }

.grid--pcb-green .grid__element { background: var(--pcb-green); color: var(--white); }
.grid--pcb-green-2 .grid__element { background: var(--pcb-green-2); }
.grid--pcb-off-white .grid__element { background: var(--pcb-off-white); }
.grid--pcb-fr4 .grid__element { background: var(--pcb-fr4); }
.grid--package-black .grid__element { background: var(--package-black); color: var(--white); }
.grid--dark-grey .grid__element { background: var(--dark-grey); color: var(--white); }
.grid--light-grey .grid__element { background: var(--light-grey); }
.grid--light-blue .grid__element { background: var(--light-blue); }


/* Landscape phones and down */
@media (max-width: 500px) { 
    
    .grid--300,
    .grid--400,
    .grid--500 { 
        grid-template-columns: repeat(1, 1fr); 
    }

}