/*
 * Geburtstag v2 — Mai 2026
 *   - Quick-Jump-Nav (sticky)
 *   - 4 Long-Format-Blocks (alternierend left/right)
 *   - Filter-Box (orange Akzent)
 *   - Media-Age-Overlay (12+ / 14+ / 18+ / 40·50·60)
 *
 * Aus cage-quests-geburtstag-v2.html übernommen.
 * Conditional auf page-event-geburtstag.php geladen.
 *
 * Pattern-Mirror zu event-firmen-v2.css mit bday-spezifischen Extras:
 *   - .cq-bday-format-block-media-age (statt -media-number)
 *   - .cq-bday-format-block-media-icon
 *   - .cq-bday-filter-box (orange Akzent-Box)
 *   - .cq-bday-format-block-eyebrow.is-filter (Orange-Eyebrow)
 */

/* ═══════════════════════════════════════════════
   ACCENT TOKEN (lokal, falls global nicht vorhanden)
   ═══════════════════════════════════════════════ */
:root {
    --bday-accent: #B29474; /* Beschluss Viktor 25.08.2026, bestaetigt 07.09.2026: Hard Rule Schwarz/Weiss/Gold — Amber #f39c12 abgeloest */
}

/* ═══════════════════════════════════════════════
   QUICK-JUMP-NAV (sticky)
   ═══════════════════════════════════════════════ */
.cq-bday-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-bday-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-bday-quickjump-inner::-webkit-scrollbar { display: none; }

.cq-bday-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-bday-quickjump-list {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.cq-bday-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-bday-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-bday-quickjump-list a:hover,
.cq-bday-quickjump-list a.is-active {
    color: var(--white);
}

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

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

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

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

.cq-bday-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-bday-format-block.is-reverse .cq-bday-format-block-inner {
    grid-template-columns: 1fr 1.1fr;
}

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

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

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

.cq-bday-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-bday-format-block-eyebrow::before {
    content: '';
    width: 32px; height: 1px;
    background: currentColor;
}

/* Orange Eyebrow für Filter-Blocks (z.B. Kindergeburtstag „Ab 12 Jahren") */
.cq-bday-format-block-eyebrow.is-filter {
    color: var(--bday-accent);
    opacity: 0.85;
}

.cq-bday-format-block-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 100;
    line-height: 1.18;
    letter-spacing: clamp(0.08rem, 0.15vw, 0.12rem);
    color: var(--white);
    margin: 0;
}

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

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

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

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

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

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

/* SEO Sub-H3 (z.B. „Escape Room für Kinder ab 12 Jahren — was zeichnet uns aus") */
.cq-bday-format-block-h3 {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: var(--gold-light);
    margin: 0.2rem 0 -0.4rem 0;
}

.cq-bday-format-block-h3-content {
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255,255,255,0.5);
}

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

.cq-bday-format-block-h3-content p { margin: 0 0 0.6em 0; }
.cq-bday-format-block-h3-content p:last-child { margin-bottom: 0; }

/* Filter-Box (z.B. „Warum erst ab 12?") */
.cq-bday-filter-box {
    margin-top: 0.5rem;
    padding: 1rem 1.2rem;
    background: rgba(243,156,18,0.05);
    border-left: 2px solid rgba(243,156,18,0.5);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255,255,255,0.6);
}

.cq-bday-filter-box strong {
    color: var(--bday-accent);
    font-weight: 500;
}

.cq-bday-filter-box em {
    font-style: italic;
    color: var(--gold-light);
}

.cq-bday-filter-box p { margin: 0 0 0.6em 0; }
.cq-bday-filter-box p:last-child { margin-bottom: 0; }

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

.cq-bday-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-bday-format-block-prop-dot {
    width: 4px; height: 4px;
    background: var(--gold);
    border-radius: 50%;
}

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

.cq-bday-format-block-ctas {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Media (Visual Block) — atmosphärisches Element mit Age-Overlay */
.cq-bday-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-bday-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-bday-format-block:hover .cq-bday-format-block-media-img {
    transform: scale(1.05);
    filter: brightness(0.75) saturate(1);
}

.cq-bday-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-bday-format-block-media-age {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 100;
    color: rgba(178,148,116,0.55);
    line-height: 1;
    letter-spacing: -0.03em;
    z-index: 2;
    text-align: right;
}

.cq-bday-format-block-media-age-sub {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(178,148,116,0.5);
    margin-top: 0.3rem;
}

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

.cq-bday-format-block-media-icon {
    /* Die Caption traegt seit 07.09.2026 ein Inline-SVG (E8) — font-size
       wirkt dort nicht mehr. Die Symbol-Fallback-Kette bleibt trotzdem
       stehen: defensiv, falls an anderer Stelle noch ein Unicode-Zeichen
       ausgegeben wird. Ohne sie zeigt eine Webfont ohne das Zeichen ein "?". */
    font-family: var(--font-primary), "Segoe UI Symbol", "Apple Symbols", sans-serif;
    font-size: 1.8rem;
    color: var(--gold-light);
    margin-bottom: 0.8rem;
    display: block;
    line-height: 1;
}

.cq-bday-format-block-media-icon svg {
    display: block;
    width: 28px;
    height: 28px;
}

.cq-bday-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-bday-format-block-inner,
    .cq-bday-format-block.is-reverse .cq-bday-format-block-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .cq-bday-format-block.is-reverse .cq-bday-format-block-text { order: 2; }
    .cq-bday-format-block.is-reverse .cq-bday-format-block-media { order: 1; }
    .cq-bday-format-block-media { aspect-ratio: 16/10; max-height: 320px; }
    .cq-bday-format-block { padding: 3rem 1.5rem; }
}

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


/* ──────────────────────────────────────────────────────────────
   Quick-Jump-Leiste (Geburtstag) 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-bday-quickjump-inner {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        height: auto;
        min-height: 56px;
        row-gap: 0;
    }
    .cq-bday-quickjump-list {
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: center;
    }
}

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