/* ==========================================================================
   TRANSITION BAND — LIGHT VARIANT
   Helle Beige-Version für Position 9 (zwischen Strategic 🖤 und Voices 🖤)
   Schafft den Rhythmusbruch und veredelt den Kapitel-Marker.
   Verwendung: <aside class="transition-band transition-band-light">
   ========================================================================== */

.transition-band.transition-band-light {
    background: var(--paper, #f5f1e8);
    height: clamp(180px, 22vh, 260px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    isolation: isolate;
}

/* Bild als dezente künstlerische Textur — sehr zurückhaltend */
.transition-band.transition-band-light img {
    filter: grayscale(1) contrast(1.05) brightness(1.08);
    opacity: 0.18;
    mix-blend-mode: multiply;
}

/* Heller Overlay — weicher Verlauf von beige nach transparent nach beige */
.transition-band.transition-band-light .transition-band-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(245, 241, 232, 0.88) 0%,
            rgba(245, 241, 232, 0.55) 50%,
            rgba(245, 241, 232, 0.88) 100%
        );
}

/* Eyebrow — dunkler, da auf hellem Grund */
.transition-band.transition-band-light .transition-band-eyebrow {
    color: var(--ink, #111);
    opacity: 0.72;
}

/* Headline — Tinte statt Papier */
.transition-band.transition-band-light .transition-band-text {
    color: var(--ink, #111);
}

/* Accent bleibt — Akzentfarbe funktioniert auf beide Hintergründe */
.transition-band.transition-band-light .transition-band-text .accent {
    color: var(--accent);
}

/* Dezenter Trennstrich oben — "Kapitel"-Marker verstärkt */
.transition-band.transition-band-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 2px;
    background: var(--accent);
    z-index: 3;
}

/* Optional: kleines Kapitel-Symbol — Crosshair-Style */
.transition-band.transition-band-light .transition-band-content {
    gap: 16px;
}

/* Mobile: Höhe und Spacing anpassen */
@media (max-width: 640px) {
    .transition-band.transition-band-light {
        height: clamp(140px, 18vh, 200px);
    }
}