:root {
    --bg-color: #f8fafc;
    --text-color: #334155;
    --header-color: #1e293b;
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    
    /* Dezente Sektions-Farben */
    --color-math: #3b82f6;      /* Blau */
    --color-it: #10b981;        /* Grün */
    --color-games: #f59e0b;     /* Orange/Gold */
}

/* --- Basis Styling --- */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header h1 {
    color: var(--header-color);
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 60px;
    letter-spacing: -1px;
}

.container {
    width: 100%;
    max-width: 900px;
}

/* --- Sektions Styling --- */
.row {
    margin-bottom: 60px;
}

.row h2 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    opacity: 0.7;
    display: flex;
    align-items: center;
}

.row h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    margin-left: 20px;
    opacity: 0.2;
}

.row:nth-child(1) h2 { color: var(--color-math); }
.row:nth-child(2) h2 { color: var(--color-it); }
.row:nth-child(3) h2 { color: var(--color-games); }

/* --- Grid & Card Styling --- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.card {
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    padding: 30px 20px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0,0,0,0.03);
    text-align: center;
}

.card span {
    font-weight: 600;
    margin-top: 18px;
    font-size: 1.05rem;
}

/* Hover-Effekte */
.row:nth-child(1) .card:hover { border-color: var(--color-math); transform: translateY(-5px); }
.row:nth-child(2) .card:hover { border-color: var(--color-it); transform: translateY(-5px); }
.row:nth-child(3) .card:hover { border-color: var(--color-games); transform: translateY(-5px); }

/* --- ALLGEMEINES ICON STYLING --- */
.icon {
    width: 60px; /* Etwas größer für bessere Sichtbarkeit */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    position: relative;
    /* transition: transform 0.3s ease; */
}

/* Icon-Box Hintergrundfarben */
.row:nth-child(1) .icon { background-color: rgba(59, 130, 246, 0.1); color: var(--color-math); }
.row:nth-child(2) .icon { background-color: rgba(16, 185, 129, 0.1); color: var(--color-it); }
.row:nth-child(3) .icon { background-color: rgba(245, 158, 11, 0.1); color: var(--color-games); }

/* Globale Pseudo-Element Einstellungen */
.icon::before, .icon::after {
    box-sizing: border-box;
}


/* =========================================
   === EBENE 1: MATH STUFF (BLAU) ===
   ========================================= */

/* Icon 1: Kopfrechnen (Plus-Zeichen) */
.icon-math::before, .icon-math::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 2px;
}
.icon-math::before { width: 24px; height: 4px; }
.icon-math::after { width: 4px; height: 24px; }

/* Icon 2: Robotik (Roboter-Kopf) */
.icon-robot {
    width: 40px; /* Innere Größe */
    height: 30px;
    border: 3px solid currentColor;
    border-radius: 5px;
    margin-top: 10px; /* Ausgleich */
}
/* Augen */
.icon-robot::before {
    content: '● ●';
    font-size: 10px;
    color: currentColor;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}
/* Antenne */
.icon-robot::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 8px;
    background: currentColor;
}


/* =========================================
   === EBENE 2: IT STUFF (GRÜN) ===
   ========================================= */

/* Icon 3: 10 min Bewerter (Häkchen) */
.icon-check {
    /* Nutzt die Standard .icon Größe */
}
.icon-check::after {
    content: '';
    width: 12px;
    height: 24px;
    border: solid currentColor;
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
    margin-top: -6px; /* Mittig ausrichten */
}

/* Icon 4: Richtigschreiben (Buchstaben ABC mit Stift) */
.icon-abc {
    font-size: 20px;
    font-weight: 800;
}
.icon-abc::before {
    content: 'Ab';
    position: relative;
    left: -2px;
}
/* Stift-Andeutung */
.icon-abc::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 18px;
    background: currentColor;
    transform: rotate(20deg);
    right: 15px;
    top: 15px;
    border-radius: 2px;
}

/* Icon 5: h5p Quiz Ersteller (Fragezeichen im Kreis) */
.icon-quiz {
    font-size: 32px;
    font-weight: 800;
}
.icon-quiz::before {
    content: '?';
}
/* Optionaler Kreis um das Fragezeichen */
/* .icon-quiz::after {
    content: '';
    position: absolute;
    width: 45px; height: 45px;
    border: 3px solid currentColor;
    border-radius: 50%;
}
*/


/* =========================================
   === EBENE 3: BOARDGAME STUFF (ORANGE) ===
   ========================================= */

/* Icon 6: Hexamag Shop (Ausgefülltes Sechseck) */
.icon-hex {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: currentColor !important;
    width: 35px;
    height: 40px;
}

/* Icon 7: nextgamenight (Würfel mit 5 Punkten) */
.icon-dice {
    width: 36px;
    height: 36px;
    border: 3px solid currentColor;
    border-radius: 7px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 3px;
    gap: 2px;
}
/* Die 5 Punkte simulieren */
.icon-dice::before {
    content: '';
    background: currentColor;
    border-radius: 50%;
    /* Punkte-Positionen: top-left, top-right, center, bottom-left, bottom-right */
    box-shadow: 
        0px 0px 0 2px currentColor, /* top-left */
        22px 0px 0 2px currentColor, /* top-right */
        11px 11px 0 2px currentColor, /* center */
        0px 22px 0 2px currentColor, /* bottom-left */
        22px 22px 0 2px currentColor; /* bottom-right */
    width: 2px; height: 2px; /* Punktgröße (sehr klein, da shadow wirkt) */
    position: absolute;
    top: 6px; left: 6px;
}

/* Icon 8: boardgamechallenge (Trophäe) */
.icon-trophy {
    width: 28px;
    height: 22px;
    border: 3px solid currentColor;
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin-top: -10px;
}
/* Standfuß */
.icon-trophy::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 12px;
    background: currentColor;
}
/* Basis-Platte */
.icon-trophy::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 4px;
    background: currentColor;
    border-radius: 2px;
}