/* ============================
   Hub (/fuer-wen) — per-tile accent
   Jede Kachel bekommt die Akzentfarbe ihrer Landingpage. Die Farbwerte
   werden pro Karte inline als CSS-Variablen gesetzt (siehe offers[].accent);
   hier wird daraus ein farbiger Top-Balken + akzentfarbiger Hover-Rand.
   ============================ */
/* Untergruppen-Überschrift (Branchen / Soli-Aktionen) mit Trennlinie */
.hub-group-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-heading);
    margin: 52px 0 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.hub-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* die Gruppen-Labels liefern den Abstand – Grid-Default zurücksetzen */
.references-grid {
    margin-top: 0;
}

.references-grid .reference-card {
    position: relative;
    overflow: hidden;
}

/* farbiger Akzentbalken am oberen Kartenrand */
.references-grid .reference-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
    opacity: 0.9;
    transition: opacity var(--transition);
}

.references-grid .reference-card:hover {
    border-color: var(--color-accent-line);
}

.references-grid .reference-card:hover::before {
    opacity: 1;
}

/* die CTA-Kachel behält ihren gestrichelten Rahmen ohne Vollbalken */
.references-grid .reference-card.reference-cta::before {
    display: none;
}

/* "Gemeinsam stark" trägt als Werte-Soli einen Regenbogen-Balken */
.references-grid .reference-card[href="/gemeinsam-stark"]::before {
    background: linear-gradient(90deg, #ff5f6d 0%, #ffae42 22%, #ffe14d 40%, #4fcf88 58%, #4c9dff 78%, #a855f7 100%);
    opacity: 1;
}