/*
 * Cards-System
 *
 * Flexibles Card-Layout auf Flexbox-Basis.
 *
 * Funktionen:
 * - 1 bis 6 Spalten per Klasse: .cards--cols-1 bis .cards--cols-6
 * - Mindestbreite der Cards per Klasse: .cards--min-100 bis .cards--min-500
 * - letzte unvollständige Zeile wird automatisch zentriert
 * - Cards behalten bei mehrspaltigem Layout ihre berechnete Breite
 * - bei einspaltigem Layout werden Cards vollbreit dargestellt
 * - gleiche Höhe pro Zeile ist standardmäßig aktiv
 * - .cards--auto-height erlaubt natürliche Card-Höhen
 * - Textausrichtung per .cards--text-left / .cards--text-center / .cards--text-right
 * - Card-Titel per .cards__title mit Größenklassen .cards--title-small bis .cards--title-xlarge
 * - Farb-Modifier nutzen globale CSS-Variablen aus der Haupt-CSS
 */


/*
 * Basis
 */
.cards {
    --cards-gap: 20px;
    --cards-columns: 3;
    --cards-min-width: 200px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--cards-gap);
    width: 100%;
    margin: 20px 0;

    container-type: inline-size;
}

.cards__item {
    box-sizing: border-box;
    padding: 20px;
    flex: 0 1 100%;
}


/*
 * Spaltenanzahl
 */
.cards--cols-1 { --cards-columns: 1; }
.cards--cols-2 { --cards-columns: 2; }
.cards--cols-3 { --cards-columns: 3; }
.cards--cols-4 { --cards-columns: 4; }
.cards--cols-5 { --cards-columns: 5; }
.cards--cols-6 { --cards-columns: 6; }


/*
 * Mindestbreite der Cards
 */
.cards--min-100 { --cards-min-width: 100px; }
.cards--min-150 { --cards-min-width: 150px; }
.cards--min-200 { --cards-min-width: 200px; }
.cards--min-250 { --cards-min-width: 250px; }
.cards--min-300 { --cards-min-width: 300px; }
.cards--min-400 { --cards-min-width: 400px; }
.cards--min-500 { --cards-min-width: 500px; }


/*
 * Abstände
 */
.cards--gap-0 { --cards-gap: 0px; }
.cards--gap-10 { --cards-gap: 10px; }
.cards--gap-20 { --cards-gap: 20px; }
.cards--gap-30 { --cards-gap: 30px; }
.cards--gap-40 { --cards-gap: 40px; }


/*
 * Höhenverhalten
 *
 * Standard:
 * Durch align-items: stretch haben Cards innerhalb derselben Zeile
 * automatisch dieselbe Höhe.
 */
.cards--auto-height {
    align-items: flex-start;
}

.cards--equal-height .cards__item {
    display: flex;
    flex-direction: column;
}


/*
 * Textausrichtung
 */
.cards--text-left .cards__item {
    text-align: left;
}

.cards--text-center .cards__item {
    text-align: center;
}

.cards--text-right .cards__item {
    text-align: right;
}


/*
 * Textausrichtung pro einzelner Card
 */
.cards__item--text-left {
    text-align: left;
}

.cards__item--text-center {
    text-align: center;
}

.cards__item--text-right {
    text-align: right;
}


/*
 * Card-Titel
 */
.cards__title {
    display: block;
    margin: 0 0 10px 0;
    font-weight: 700;
    line-height: 1.2;
}


/*
 * Titelgrößen
 */
.cards--title-small .cards__title {
    font-size: 1rem;
}

.cards--title-medium .cards__title {
    font-size: 1.25rem;
}

.cards--title-large .cards__title {
    font-size: 1.5rem;
}

.cards--title-xlarge .cards__title {
    font-size: 2rem;
}


/*
 * Varianten
 */
.cards--rounded .cards__item {
    border-radius: 6px;
}


/*
 * Farbvarianten
 * Die Variablen müssen global definiert sein.
 */
.cards--pcb-green .cards__item {
    background: var(--pcb-green);
    color: var(--white);
}

.cards--pcb-green-2 .cards__item {
    background: var(--pcb-green-2);
}

.cards--pcb-off-white .cards__item {
    background: var(--pcb-off-white);
}

.cards--pcb-fr4 .cards__item {
    background: var(--pcb-fr4);
}

.cards--package-black .cards__item {
    background: var(--package-black);
    color: var(--white);
}

.cards--dark-grey .cards__item {
    background: var(--dark-grey);
    color: var(--white);
}

.cards--light-grey .cards__item {
    background: var(--light-grey);
}

.cards--light-blue .cards__item {
    background: var(--light-blue);
}


/*
 * Spaltenlogik
 *
 * Die Breakpoints beziehen sich auf die Breite des .cards-Containers,
 * nicht auf die Breite des Browserfensters.
 *
 * Formel:
 * Spaltenanzahl × Mindestbreite + Anzahl der Gaps
 */


/*
 * 2 Spalten
 */
@container (min-width: 220px) {
    .cards--cols-2.cards--min-100 .cards__item,
    .cards--cols-3.cards--min-100 .cards__item,
    .cards--cols-4.cards--min-100 .cards__item,
    .cards--cols-5.cards--min-100 .cards__item,
    .cards--cols-6.cards--min-100 .cards__item {
        flex-basis: calc((100% - var(--cards-gap)) / 2);
    }
}

@container (min-width: 320px) {
    .cards--cols-2.cards--min-150 .cards__item,
    .cards--cols-3.cards--min-150 .cards__item,
    .cards--cols-4.cards--min-150 .cards__item,
    .cards--cols-5.cards--min-150 .cards__item,
    .cards--cols-6.cards--min-150 .cards__item {
        flex-basis: calc((100% - var(--cards-gap)) / 2);
    }
}

@container (min-width: 420px) {
    .cards--cols-2.cards--min-200 .cards__item,
    .cards--cols-3.cards--min-200 .cards__item,
    .cards--cols-4.cards--min-200 .cards__item,
    .cards--cols-5.cards--min-200 .cards__item,
    .cards--cols-6.cards--min-200 .cards__item {
        flex-basis: calc((100% - var(--cards-gap)) / 2);
    }
}

@container (min-width: 520px) {
    .cards--cols-2.cards--min-250 .cards__item,
    .cards--cols-3.cards--min-250 .cards__item,
    .cards--cols-4.cards--min-250 .cards__item,
    .cards--cols-5.cards--min-250 .cards__item,
    .cards--cols-6.cards--min-250 .cards__item {
        flex-basis: calc((100% - var(--cards-gap)) / 2);
    }
}

@container (min-width: 620px) {
    .cards--cols-2.cards--min-300 .cards__item,
    .cards--cols-3.cards--min-300 .cards__item,
    .cards--cols-4.cards--min-300 .cards__item,
    .cards--cols-5.cards--min-300 .cards__item,
    .cards--cols-6.cards--min-300 .cards__item {
        flex-basis: calc((100% - var(--cards-gap)) / 2);
    }
}

@container (min-width: 820px) {
    .cards--cols-2.cards--min-400 .cards__item,
    .cards--cols-3.cards--min-400 .cards__item,
    .cards--cols-4.cards--min-400 .cards__item,
    .cards--cols-5.cards--min-400 .cards__item,
    .cards--cols-6.cards--min-400 .cards__item {
        flex-basis: calc((100% - var(--cards-gap)) / 2);
    }
}

@container (min-width: 1020px) {
    .cards--cols-2.cards--min-500 .cards__item,
    .cards--cols-3.cards--min-500 .cards__item,
    .cards--cols-4.cards--min-500 .cards__item,
    .cards--cols-5.cards--min-500 .cards__item,
    .cards--cols-6.cards--min-500 .cards__item {
        flex-basis: calc((100% - var(--cards-gap)) / 2);
    }
}


/*
 * 3 Spalten
 */
@container (min-width: 340px) {
    .cards--cols-3.cards--min-100 .cards__item,
    .cards--cols-4.cards--min-100 .cards__item,
    .cards--cols-5.cards--min-100 .cards__item,
    .cards--cols-6.cards--min-100 .cards__item {
        flex-basis: calc((100% - (2 * var(--cards-gap))) / 3);
    }
}

@container (min-width: 490px) {
    .cards--cols-3.cards--min-150 .cards__item,
    .cards--cols-4.cards--min-150 .cards__item,
    .cards--cols-5.cards--min-150 .cards__item,
    .cards--cols-6.cards--min-150 .cards__item {
        flex-basis: calc((100% - (2 * var(--cards-gap))) / 3);
    }
}

@container (min-width: 640px) {
    .cards--cols-3.cards--min-200 .cards__item,
    .cards--cols-4.cards--min-200 .cards__item,
    .cards--cols-5.cards--min-200 .cards__item,
    .cards--cols-6.cards--min-200 .cards__item {
        flex-basis: calc((100% - (2 * var(--cards-gap))) / 3);
    }
}

@container (min-width: 790px) {
    .cards--cols-3.cards--min-250 .cards__item,
    .cards--cols-4.cards--min-250 .cards__item,
    .cards--cols-5.cards--min-250 .cards__item,
    .cards--cols-6.cards--min-250 .cards__item {
        flex-basis: calc((100% - (2 * var(--cards-gap))) / 3);
    }
}

@container (min-width: 940px) {
    .cards--cols-3.cards--min-300 .cards__item,
    .cards--cols-4.cards--min-300 .cards__item,
    .cards--cols-5.cards--min-300 .cards__item,
    .cards--cols-6.cards--min-300 .cards__item {
        flex-basis: calc((100% - (2 * var(--cards-gap))) / 3);
    }
}

@container (min-width: 1240px) {
    .cards--cols-3.cards--min-400 .cards__item,
    .cards--cols-4.cards--min-400 .cards__item,
    .cards--cols-5.cards--min-400 .cards__item,
    .cards--cols-6.cards--min-400 .cards__item {
        flex-basis: calc((100% - (2 * var(--cards-gap))) / 3);
    }
}

@container (min-width: 1540px) {
    .cards--cols-3.cards--min-500 .cards__item,
    .cards--cols-4.cards--min-500 .cards__item,
    .cards--cols-5.cards--min-500 .cards__item,
    .cards--cols-6.cards--min-500 .cards__item {
        flex-basis: calc((100% - (2 * var(--cards-gap))) / 3);
    }
}


/*
 * 4 Spalten
 */
@container (min-width: 460px) {
    .cards--cols-4.cards--min-100 .cards__item,
    .cards--cols-5.cards--min-100 .cards__item,
    .cards--cols-6.cards--min-100 .cards__item {
        flex-basis: calc((100% - (3 * var(--cards-gap))) / 4);
    }
}

@container (min-width: 660px) {
    .cards--cols-4.cards--min-150 .cards__item,
    .cards--cols-5.cards--min-150 .cards__item,
    .cards--cols-6.cards--min-150 .cards__item {
        flex-basis: calc((100% - (3 * var(--cards-gap))) / 4);
    }
}

@container (min-width: 860px) {
    .cards--cols-4.cards--min-200 .cards__item,
    .cards--cols-5.cards--min-200 .cards__item,
    .cards--cols-6.cards--min-200 .cards__item {
        flex-basis: calc((100% - (3 * var(--cards-gap))) / 4);
    }
}

@container (min-width: 1060px) {
    .cards--cols-4.cards--min-250 .cards__item,
    .cards--cols-5.cards--min-250 .cards__item,
    .cards--cols-6.cards--min-250 .cards__item {
        flex-basis: calc((100% - (3 * var(--cards-gap))) / 4);
    }
}

@container (min-width: 1260px) {
    .cards--cols-4.cards--min-300 .cards__item,
    .cards--cols-5.cards--min-300 .cards__item,
    .cards--cols-6.cards--min-300 .cards__item {
        flex-basis: calc((100% - (3 * var(--cards-gap))) / 4);
    }
}

@container (min-width: 1660px) {
    .cards--cols-4.cards--min-400 .cards__item,
    .cards--cols-5.cards--min-400 .cards__item,
    .cards--cols-6.cards--min-400 .cards__item {
        flex-basis: calc((100% - (3 * var(--cards-gap))) / 4);
    }
}

@container (min-width: 2060px) {
    .cards--cols-4.cards--min-500 .cards__item,
    .cards--cols-5.cards--min-500 .cards__item,
    .cards--cols-6.cards--min-500 .cards__item {
        flex-basis: calc((100% - (3 * var(--cards-gap))) / 4);
    }
}


/*
 * 5 Spalten
 */
@container (min-width: 580px) {
    .cards--cols-5.cards--min-100 .cards__item,
    .cards--cols-6.cards--min-100 .cards__item {
        flex-basis: calc((100% - (4 * var(--cards-gap))) / 5);
    }
}

@container (min-width: 830px) {
    .cards--cols-5.cards--min-150 .cards__item,
    .cards--cols-6.cards--min-150 .cards__item {
        flex-basis: calc((100% - (4 * var(--cards-gap))) / 5);
    }
}

@container (min-width: 1080px) {
    .cards--cols-5.cards--min-200 .cards__item,
    .cards--cols-6.cards--min-200 .cards__item {
        flex-basis: calc((100% - (4 * var(--cards-gap))) / 5);
    }
}

@container (min-width: 1330px) {
    .cards--cols-5.cards--min-250 .cards__item,
    .cards--cols-6.cards--min-250 .cards__item {
        flex-basis: calc((100% - (4 * var(--cards-gap))) / 5);
    }
}

@container (min-width: 1580px) {
    .cards--cols-5.cards--min-300 .cards__item,
    .cards--cols-6.cards--min-300 .cards__item {
        flex-basis: calc((100% - (4 * var(--cards-gap))) / 5);
    }
}

@container (min-width: 2080px) {
    .cards--cols-5.cards--min-400 .cards__item,
    .cards--cols-6.cards--min-400 .cards__item {
        flex-basis: calc((100% - (4 * var(--cards-gap))) / 5);
    }
}

@container (min-width: 2580px) {
    .cards--cols-5.cards--min-500 .cards__item,
    .cards--cols-6.cards--min-500 .cards__item {
        flex-basis: calc((100% - (4 * var(--cards-gap))) / 5);
    }
}


/*
 * 6 Spalten
 */
@container (min-width: 700px) {
    .cards--cols-6.cards--min-100 .cards__item {
        flex-basis: calc((100% - (5 * var(--cards-gap))) / 6);
    }
}

@container (min-width: 1000px) {
    .cards--cols-6.cards--min-150 .cards__item {
        flex-basis: calc((100% - (5 * var(--cards-gap))) / 6);
    }
}

@container (min-width: 1300px) {
    .cards--cols-6.cards--min-200 .cards__item {
        flex-basis: calc((100% - (5 * var(--cards-gap))) / 6);
    }
}

@container (min-width: 1600px) {
    .cards--cols-6.cards--min-250 .cards__item {
        flex-basis: calc((100% - (5 * var(--cards-gap))) / 6);
    }
}

@container (min-width: 1900px) {
    .cards--cols-6.cards--min-300 .cards__item {
        flex-basis: calc((100% - (5 * var(--cards-gap))) / 6);
    }
}

@container (min-width: 2500px) {
    .cards--cols-6.cards--min-400 .cards__item {
        flex-basis: calc((100% - (5 * var(--cards-gap))) / 6);
    }
}

@container (min-width: 3100px) {
    .cards--cols-6.cards--min-500 .cards__item {
        flex-basis: calc((100% - (5 * var(--cards-gap))) / 6);
    }
}