/* --- Grundeinstellungen --- */
* {
    box-sizing: border-box; /* Wichtig für korrekte Breitenberechnung */
}

body {
    font-family: Arial, Helvetica, sans-serif; /* Entspricht der serifenlosen Schrift im Bild */
    font-size: 14px; /* Ungefähre Schriftgröße */
    line-height: 1; /* Schönerer Zeilenabstand für bessere Lesbarkeit */
    color: #000; /* Schwarze Schrift */
    margin: 0;
    padding: 40px; /* Abstand des gesamten Inhalts zum Browserrand */
}

/* --- Header / Hauptüberschrift --- */
.main-header {
    margin-bottom: 50px; /* Abstand zum Spalten-Layout darunter */
}

.main-header h1 {
    font-size: 24px;
    margin: 0;
}

.main-header .light {
    font-weight: normal; /* "Collective" ist nicht fett */
}

/* --- Das Spalten-Raster (Grid) --- */
.content-grid {
    display: grid;
    /* Erstellt 4 Spalten, die jeweils 1 Teil des verfügbaren Platzes (1fr) nutzen */
    grid-template-columns: repeat(4, 1fr); 
    /* Abstand zwischen den Spalten */
    gap: 20px; 
    /* Optimale Gesamtbreite, ähnlich deiner alten Tabelle */
    max-width: 900px; 
}

/* --- Gestaltung der einzelnen Spalten --- */
.grid-col h2 {
    font-size: 14px;
    font-weight: normal; /* Überschriften sind nicht fett */
    margin: 0 0 30px 0; /* Abstand nach unten */
    padding-top: 10px; /* Platz zwischen Linie und Text */
    border-top: 1px dotted #888; /* Die gestrichelte Linie ÜBER der Überschrift */
    text-transform: uppercase; /* Erzwingt Großbuchstaben */
}

/* Abstände für Absätze innerhalb der Spalten */
.grid-col p {
    margin: 0 0 20px 0; /* Abstand zwischen den Textblöcken */
}

/* --- Links --- */
a {
    color: #000; /* Links sind standardmäßig schwarz */
    text-decoration: none; /* Keine Unterstreichung */
}

a:hover {
    text-decoration: underline; /* Unterstreichung nur beim Drüberfahren */
}

/* Spezielle Klasse für die fetten Links (Portfolio, E-Mail) */
.bold-link {
    font-weight: bold;
}

/* Spezielle Gestaltung für die LINKS-Spalte (alles fett) */
.links-col p a {
    font-weight: bold;
}