/**
 * Headlines CSS
 * 
 * Premium Headlines mit Gradient-Akzenten
 */

.headline-h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    margin-bottom: 32px;
    line-height: var(--line-height-tight);
    letter-spacing: -1px;
    position: relative;
}

.headline-h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 24px;
    line-height: var(--line-height-tight);
    letter-spacing: -0.5px;
    position: relative;
    display: inline-block;
}

.headline-h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.headline-h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 20px;
    line-height: var(--line-height-normal);
    letter-spacing: -0.3px;
}

.headline-h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 16px;
    line-height: var(--line-height-normal);
}