/*
 * Firmenevents v2 — Mai 2026
 *   - Quick-Jump-Nav (sticky)
 *   - 6 Long-Format-Blocks (alternierend left/right)
 *
 * Aus cage-quests-firmenevents-v2.html (Zeilen 452-745) 1:1 übernommen.
 * Conditional auf page-event-firmen.php geladen.
 */

/* ═══════════════════════════════════════════════
   QUICK-JUMP-NAV (sticky)
   ═══════════════════════════════════════════════ */
.cq-ev-quickjump {
    position: sticky;
    top: var(--header-height);
    z-index: 90;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.cq-ev-quickjump-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 56px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cq-ev-quickjump-inner::-webkit-scrollbar { display: none; }

.cq-ev-quickjump-eyebrow {
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    flex-shrink: 0;
}

.cq-ev-quickjump-list {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.cq-ev-quickjump-list a {
    display: inline-block;
    padding: 0 1.2rem;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    line-height: 56px;
    transition: color 0.3s var(--ease);
}

.cq-ev-quickjump-list a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 1.2rem; right: 1.2rem;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform 0.3s var(--ease);
}

.cq-ev-quickjump-list a:hover,
.cq-ev-quickjump-list a.is-active {
    color: var(--white);
}

.cq-ev-quickjump-list a:hover::after,
.cq-ev-quickjump-list a.is-active::after {
    transform: scaleX(1);
}

@media (max-width: 1024px) {
    .cq-ev-quickjump { top: var(--header-height-mobile); }
    .cq-ev-quickjump-inner { padding: 0 1.5rem; height: 48px; gap: 1rem; }
    .cq-ev-quickjump-eyebrow { display: none; }
    .cq-ev-quickjump-list a { font-size: 0.65rem; padding: 0 0.9rem; line-height: 48px; }
}

/* ═══════════════════════════════════════════════
   LONG-FORMAT-BLOCKS (Hub-Strategie)
   ═══════════════════════════════════════════════ */
.cq-ev-format-block {
    position: relative;
    z-index: 2;
    padding: clamp(4rem, 8vw, 7rem) 3rem;
    scroll-margin-top: calc(var(--header-height) + 56px);
}

.cq-ev-format-block:nth-child(even) {
    background: var(--glass);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.cq-ev-format-block-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}

.cq-ev-format-block.is-reverse .cq-ev-format-block-inner {
    grid-template-columns: 1fr 1.1fr;
}

.cq-ev-format-block.is-reverse .cq-ev-format-block-text {
    order: 2;
}

.cq-ev-format-block.is-reverse .cq-ev-format-block-media {
    order: 1;
}

.cq-ev-format-block-text {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.cq-ev-format-block-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.7;
}

.cq-ev-format-block-eyebrow::before {
    content: '';
    width: 32px; height: 1px;
    background: currentColor;
}

.cq-ev-format-block-title {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 100;
    line-height: 1.15;
    letter-spacing: clamp(0.08rem, 0.15vw, 0.12rem);
    color: var(--white);
    margin: 0;
}

.cq-ev-format-block-title em {
    font-style: italic;
    color: var(--gold-light);
    font-weight: 200;
}

.cq-ev-format-block-sub {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
}

.cq-ev-format-block-sub strong {
    color: var(--white);
    font-weight: 500;
}

.cq-ev-format-block-content {
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.85;
    color: rgba(255,255,255,0.55);
}

.cq-ev-format-block-content em {
    font-style: italic;
    color: var(--gold-light);
    opacity: 0.85;
}

.cq-ev-format-block-content p { margin: 0 0 0.8em 0; }
.cq-ev-format-block-content p:last-child { margin-bottom: 0; }

.cq-ev-format-block-props {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cq-ev-format-block-prop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.9rem;
    background: rgba(178,148,116,0.08);
    border: 1px solid rgba(178,148,116,0.25);
    color: var(--gold-light);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 1px;
}

.cq-ev-format-block-prop-dot {
    width: 4px; height: 4px;
    background: var(--gold);
    border-radius: 50%;
}

.cq-ev-format-block-cta {
    margin-top: 1rem;
    align-self: flex-start;
}

/* Media (Visual Block) — atmosphärisches Element mit Number-Overlay */
.cq-ev-format-block-media {
    position: relative;
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, rgba(178,148,116,0.06) 0%, rgba(0,0,0,0.4) 100%);
    border: 1px solid var(--glass-border);
    overflow: hidden;
}

.cq-ev-format-block-media-img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.6) saturate(0.85);
    transition: transform 0.8s var(--ease), filter 0.5s var(--ease);
}

.cq-ev-format-block:hover .cq-ev-format-block-media-img {
    transform: scale(1.05);
    filter: brightness(0.75) saturate(1);
}

.cq-ev-format-block-media::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(178,148,116,0.15) 0%, transparent 50%),
        linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}

.cq-ev-format-block-media-number {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    font-size: clamp(4rem, 8vw, 6rem);
    font-weight: 100;
    color: rgba(178,148,116,0.5);
    line-height: 1;
    letter-spacing: -0.05em;
    z-index: 2;
}

.cq-ev-format-block-media-caption {
    position: absolute;
    bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
    z-index: 2;
}

.cq-ev-format-block-media-tag {
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.75;
}

@media (max-width: 900px) {
    .cq-ev-format-block-inner,
    .cq-ev-format-block.is-reverse .cq-ev-format-block-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .cq-ev-format-block.is-reverse .cq-ev-format-block-text { order: 2; }
    .cq-ev-format-block.is-reverse .cq-ev-format-block-media { order: 1; }
    .cq-ev-format-block-media { aspect-ratio: 16/10; max-height: 320px; }
    .cq-ev-format-block { padding: 3rem 1.5rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cq-ev-format-block-media-img,
    .cq-ev-quickjump-list a::after { transition: none !important; }
    .cq-ev-format-block:hover .cq-ev-format-block-media-img {
        transform: none !important; filter: brightness(0.6) saturate(0.85) !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   Quick-Jump-Leiste (Firmenevents) umbrechen statt abschneiden.

   Uebernommen aus dem dokumentierten FAQ-Muster (css/faq.css,
   Abschnitt "cq-faq-tabs umbrechen statt abschneiden"): Ab Tablet
   umbricht die Zeile und wird zentriert — damit ist sie unabhaengig
   davon, wie viele Eintraege gepflegt sind. Die Bildlaufleiste ist
   ausgeblendet, am Schreibtisch sah man vorher nur einen
   angeschnittenen letzten Eintrag ohne Hinweis, dass da noch etwas
   kommt; im Bereich 769-1024 px schob die Zeile die Seite seitlich.
   Auf dem Handy bleibt es beim seitlichen Schieben — mehrere Zeilen
   waeren dort schlechter — dafuer zeigt eine weiche Kante rechts an,
   dass es weitergeht. (Nadja A3, 07.09.2026)
   ────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    .cq-ev-quickjump-inner {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        height: auto;
        min-height: 56px;
        row-gap: 0;
    }
    .cq-ev-quickjump-list {
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .cq-ev-quickjump-inner {
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }
}