/* Farbpalette */
:root {
    --primary-color: #222222; /* Dunkles Anthrazit */
    --primary-hover: #555555; /* Mittelgrau */
    --secondary-color: #f9f9f9; /* Sehr helles Grau / fast Weiß */
    --text-color: #111111; /* Sehr dunkles Grau */
    --text-light: #666666; /* Mittelgrau für Texte */
    --background: #ffffff; /* Weiß */
    --border-radius: 4px;
    --shadow-light: rgba(0, 0, 0, 0.05);
}
/* Reset & Box-Sizing */
html,
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Grid System */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.grid + .grid {
    margin-top: 0;
    padding-top: 0;
}
.grid.inverted > * {
    background-color: var(--secondary-color);
    padding: 2rem;
    border-radius: var(--border-radius);
}

/* Spaltenklassen */
.col-12 {
    grid-column: span 12;
}
.col-9 {
    grid-column: span 9;
}
.col-8 {
    grid-column: span 8;
}
.col-7 {
    grid-column: span 7;
}
.col-6 {
    grid-column: span 6;
}
.col-5 {
    grid-column: span 5;
}
/* 2 Spalten */
.col-4 {
    grid-column: span 4;
} /* 3 Spalten */
.col-3 {
    grid-column: span 3;
} /* 4 Spalten */
.col-2 {
    grid-column: span 2;
}
.col-1 {
    grid-column: span 1;
}

/* Responsive Beispiel */
@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .col-12,
    .col-6,
    .col-4,
    .col-3,
    .col-2,
    .col-1 {
        grid-column: span 6;
    }
}

@media (max-width: 600px) {
    .grid {
        grid-template-columns: 1fr;
    }
    .col-12,
    .col-6,
    .col-4,
    .col-3,
    .col-2,
    .col-1 {
        grid-column: span 1;
    }
}