/* ============================================
   EDITORIAL.CSS — gemeinsames Section-Chrome

   .section--editorial (Rahmen + Haarlinie) und .section-meta
   (Zähler links, Label rechts) lagen bis hierher ausschliesslich in
   home.css — die aber lädt KEINE Unterseite. Auf impressum, datenschutz
   und kontakt stand .section-meta damit unformatiert im Markup.

   Von jeder Seite geladen.
   ============================================ */
.section--editorial {
    position: relative;
    background: var(--bg-primary);
}

/* Hairline divider between consecutive editorial sections */
.section--editorial + .section--editorial::before,
.section--editorial.has-top-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1600px, calc(100% - clamp(3rem, 12vw, 12rem)));
    height: 1px;
    background: rgba(245, 241, 232, 0.08);
    pointer-events: none;
}

/* Section meta header: counter (left) + label (right) */
.section-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(3rem, 6vh, 5rem) clamp(1.5rem, 6vw, 6rem) clamp(2rem, 4vh, 3rem);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.55);
    position: relative;
    z-index: 1;
}

.section-meta__counter {
    color: var(--purple-accent);
    opacity: 0.85;
    flex-shrink: 0;
}

.section-meta__label {
    text-align: right;
}

@media (max-width: 768px) {
    .section-meta {
        padding: clamp(2rem, 5vh, 3rem) 1.25rem clamp(1rem, 3vh, 1.5rem);
        font-size: 10px;
        letter-spacing: 0.18em;
        gap: 1rem;
    }
}