/* =============================================================================
   site-glueck-it.css — Site-spezifische Styles fuer glueck.it
   Wird ueber cms.site.css_file = 'site-glueck-it.css' geladen.
   ========================================================================== */

/* ── Thematische Akzentfarben ─────────────────────────────────────────────── */

:root {
    /* Standbeine */
    --card-beratung:  #2563eb;
    --card-software:  #16a34a;
    --card-seminare:  #b45309; /* abgedunkelt von #d97706 fuer WCAG-AA gegen weiss */
    --card-hosting:   #7c3aed;
    /* Produkte */
    --card-dodo:      #0891b2;
    --card-ugnaz:     #4f46e5;
    --card-backswift: #475569;
    --card-ssrs:      #dc2626;
    /* Projekte */
    --card-filings:   #0e7490;
    --card-skilltest: #059669;
    /* Button-Textfarbe: #fff auf dunklen Akzenten (Light-Mode) */
    --card-accent-text: #fff;
}

[data-theme="dark"] {
    --card-beratung:  #60a5fa;
    --card-software:  #4ade80;
    --card-seminare:  #fbbf24;
    --card-hosting:   #a78bfa;
    --card-dodo:      #22d3ee;
    --card-ugnaz:     #818cf8;
    --card-backswift: #94a3b8;
    --card-ssrs:      #f87171;
    --card-filings:   #38bdf8; /* Sky-Blue, abweichend von --card-dodo #22d3ee */
    --card-skilltest: #34d399;
    /* Dunkel auf hellen Pastell-Buttons im Dark-Mode (WCAG-Kontrast) */
    --card-accent-text: #111827;
}

/* ── Karten-Modifier: Akzentfarbe per --card-accent ──────────────────────── */

.project-card--beratung  { --card-accent: var(--card-beratung); }
.project-card--software  { --card-accent: var(--card-software); }
.project-card--seminare  { --card-accent: var(--card-seminare); }
.project-card--hosting   { --card-accent: var(--card-hosting); }
.project-card--dodo      { --card-accent: var(--card-dodo); }
.project-card--ugnaz     { --card-accent: var(--card-ugnaz); }
.project-card--backswift { --card-accent: var(--card-backswift); }
.project-card--ssrs      { --card-accent: var(--card-ssrs); }
.project-card--filings   { --card-accent: var(--card-filings); }
.project-card--skilltest { --card-accent: var(--card-skilltest); }

/* Topbalken nur auf Karten mit explizitem Modifier */
[class*="project-card--"] {
    border-top: 5px solid var(--card-accent);
}

/* ── Projekt-Karten-Grid ──────────────────────────────────────────────────── */

.project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.project-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Themed hover: farbiger Ring zusaetzlich zum Basis-Schatten */
[class*="project-card--"]:hover {
    box-shadow: var(--shadow-lg), 0 0 0 2px var(--card-accent);
}

.project-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--card-accent, var(--text-main));
    line-height: 1.3;
}

.project-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 1.5rem;
    padding: 0; /* base.css p,li hat padding: 6px 16px — hier resetten */
    flex: 1;
}

/* Button klebt am unteren Rand */
.project-card .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Themed Button: Akzentfarbe + korrekter Textkontrast in beiden Modes.
   Beide Schreibweisen abdecken (BEM .btn--primary + Legacy .btn-primary). */
.project-card .btn-primary,
.project-card .btn--primary {
    background-color: var(--card-accent, var(--btn-primary-bg));
    border-color: var(--card-accent, var(--btn-primary-bg));
    color: var(--card-accent-text, #fff);
}

.project-card .btn-primary:hover,
.project-card .btn--primary:hover {
    filter: brightness(0.88);
    transform: none; /* .btn:hover hat translateY(-1px) — in gehobener Karte unerwuenscht */
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .project-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}