/* ============================================
   Öffentliche Seiten Styles
   ============================================ */

/* Homepage */
.hero {
    text-align: center;
    padding: var(--spacing-16) var(--spacing-4);
}

.hero h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-4);
    color: var(--color-gray-900);
}

.hero p {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    max-width: 500px;
    margin: 0 auto var(--spacing-8);
    line-height: var(--line-height-normal);
}

/* Feature Grid */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

.feature-card {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-6);
}

.feature-card svg {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--spacing-4);
    color: var(--color-primary);
}

.feature-card h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-2);
}

.feature-card p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: var(--line-height-normal);
}