:root {
    /* Basis */
    --bg: #f6f7fb;
    --ink: #0f172a;
    --card: #ffffff;
    --shadow: 0 10px 20px rgba(2,6,23,.06),0 2px 6px rgba(2,6,23,.04);
    --radius-card: 16px;
    /* Kleuren per tegel (hex) */
    --teal: #7ae67a;
    --purple: #767dba;
    --sky: #00aff0;
    --orange: #ff7127;
    --yellow: #fade00;
    --red: #d32d31;
    --powder: #dde6e9;
    --mint: #dde6e9;
    --plum: #820080;
    /* Badges */
    --count-bg: #eee9ff;
    --count-fg: #4d44b5;
    --count-bd: rgba(91,85,200,.18);
    --new-bg: #dff2ff;
    --new-fg: #075985;
    --new-bd: rgba(7,89,133,.18);
}

* {
    box-sizing: border-box
}

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px
}

.grid-2-cols {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

@media (max-width:900px) {
    .grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:560px) {
    .grid {
        grid-template-columns: 1fr
    }
}

/* Card */
.card {
    position: relative;
    background: var(--card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    border: 1px solid rgba(2,6,23,.06);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*min-height: 220px;*/
    transition: transform .16s ease, box-shadow .16s ease;
    text-decoration: none !important;
    color: inherit;    
}

.hover-card:hover {
    transform: translateY(-3px)
}

.hover-card:active {
    transform: translateY(-1px)
}

.card:focus-visible {
    outline: 3px solid color-mix(in oklab, #6f63ff 30%, white);
    outline-offset: 4px
}

/* Badge op card */
.hover-card .badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--count-bg);
    color: var(--count-fg);
    border: 1px solid var(--count-bd)
}

.hover-card .badge.new {
    background: var(--new-bg);
    color: var(--new-fg);
    border-color: var(--new-bd)
}

/* ===== Afgeronde HEXAGON =====
     - Vast formaat voor consistentie
     - SVG path met 'stroke-linejoin: round' geeft afgeronde hoeken
     - Kleur via CSS-variabele --hex
  */
.hex {
    --w: 240px;
    --h: 180px; /* formaat van de hex (alle tegels gelijk) */
    position: relative;
    width: var(--w);
    height: var(--h);
    display: grid;
    place-items: center;
}

.hexbg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hexbg path {
    /* De path-coördinaten tekenen een platte-top hex.
    Stroke = zelfde kleur als fill → buitencontour mooi afgerond. */
    stroke: var(--hex);
    fill: var(--hex);
    stroke-width: 16;
    stroke-linejoin: round;
}

.inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-align: center;
}

.icon {
    width: 44px;
    height: 44px;
    stroke: #fff;
    stroke-width: 2.4;
    fill: none
}

.title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .2px
}

/* Donker tekst indien kleur licht is */
.darkText .inner {
    color: #111;
}

.darkText .icon {
    stroke: #111;
}

/* Kleuren per card -> variabele --hex */
.teal {
    --hex: var(--teal);
}

.purple {
    --hex: var(--purple);
}

.sky {
    --hex: var(--sky);
}

.orange {
    --hex: var(--orange);
}

.yellow {
    --hex: var(--yellow);
}

.red {
    --hex: var(--red);
}

.powder {
    --hex: var(--powder);
}

.mint {
    --hex: var(--mint);
}

.plum {
    --hex: var(--plum);
}

/* Kleine hover-lift */
.card:hover .hex {
    transform: translateY(-1px);
    transition: transform .16s ease;
}

@media (prefers-reduced-motion: reduce) {
    .card, .hex {
        transition: none
    }

    .card:hover {
        transform: none
    }
}

.card .card-body {
    padding: 0;
}

.card .card-body-with-padding, .collapse .card-body {
    padding: 0.9375rem;
}

.icon-blue {
    color:#00aff0;
}