/**
 * ============================================================================
 * ROCK-IT EVENT – Seitenkopf (WordPress-Port)
 * ============================================================================
 * Portiert aus WACMS v1: css/layout/_header.css
 * Rote Schraffur, die gegen unten ins Schwarz ausläuft:
 *   ::after  – Verlauf über die untere Hälfte, 50 % Schwarz → transparent
 *   ::before – zusätzlicher 1-rem-Verlauf an der Unterkante
 * Benötigt die Tokens aus rie-nav.css.
 * ============================================================================
 */

.rie-page-header {
    padding: 15rem 0 1rem;
    position: relative;
    background: var(--rie-stripes);
    color: var(--rie-white);
}

.rie-page-header.is-starting {
    padding: 5rem 0 0;
}

@media (max-width: 767px) {
    .rie-page-header { padding: 10rem 0 1rem; }
    .rie-page-header.is-starting { padding: 5rem 0 0; }
}

.rie-page-header::after,
.rie-page-header::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.rie-page-header::after  { height: 50%; }
.rie-page-header::before { height: 1rem; }

/* Inhalt über den Verläufen */
.rie-page-header > .rie-container {
    position: relative;
    z-index: 1;
}

.rie-page-header h1 {
    font-family: var(--rie-font);
    font-weight: 900;
    font-size: 48px;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 .5rem;
}

@media (max-width: 992px) { .rie-page-header h1 { font-size: 36px; } }
@media (max-width: 576px) { .rie-page-header h1 { font-size: 30px; } }