/* src/css/bento.css */

.bento-grid {
    display: grid;
    /* Automatisches Raster, bricht wunderbar sauber um */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    width: 100%;
}

.bento-card {
    /* REINWEISS: Poppt jetzt perfekt auf dem eisgrauen Insel-Hintergrund! */
    background: var(--color-bg-card);
    border-radius: 24px; 
    padding: 40px 30px;
    
    /* Gestochen scharfe Umrandung und feiner SaaS-Schatten */
    border: 1px solid var(--border-card); 
    box-shadow: var(--shadow-soft); 
    
    display: flex; flex-direction: column; align-items: flex-start;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    cursor: pointer; position: relative; overflow: hidden;
}

/* Hover-Effekt: Die Karte hebt sich an und wirft einen blauen Schatten */
.bento-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover); 
}

/* Die leuchtende blaue Linie am oberen Rand beim Hovern */
.bento-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--color-brand-primary);
    transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
.bento-card:hover::before { transform: scaleX(1); }

/* Das Icon-Styling in einem kleinen, weichen Rahmen */
.bento-icon {
    width: 60px; height: 60px; margin-bottom: 25px;
    color: var(--color-brand-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 8%, white); /* Sehr helles Eisblau, basierend aufs Master-Blau! */
    border-radius: 16px; 
    padding: 14px; box-sizing: border-box;
    display: flex; justify-content: center; align-items: center;
    transition: background 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover-Animation für das Icon */
.bento-card:hover .bento-icon {
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
    transform: scale(1.1) rotate(-5deg);
}

.bento-icon svg { width: 100%; height: 100%; fill: currentColor; }

.bento-title { 
    font-size: 1.35rem; 
    color: var(--color-text-main); 
    margin: 0 0 15px 0; 
    font-weight: 800; 
    letter-spacing: -0.5px; 
}

.bento-text { 
    font-size: 1rem; 
    color: var(--color-text-muted); 
    line-height: 1.7; 
    margin: 0; 
}