/* ==========================================================================
   FEATURED CARD + VORGESPRÄCH-OPTION
   Dossier Edition — v04.26
   ========================================================================== */

/* --------------------------------------------------------------------------
   FORMAT-CARD FEATURED (Executive Keynote = meistgebucht)
   -------------------------------------------------------------------------- */
.format-card-featured {
    position: relative;
    border: 1px solid rgba(255, 90, 31, 0.35);
    box-shadow:
        0 0 0 4px rgba(255, 90, 31, 0.06),
        0 20px 60px rgba(0, 0, 0, 0.06);
    outline-offset: 6px;
}

.format-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    background: var(--accent, #ff5a1f);
    color: #000;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
}

.format-card-featured .format-num {
    color: var(--accent, #ff5a1f);
}

.format-card-featured .format-title .accent {
    color: var(--accent, #ff5a1f);
}

/* Subtle top accent line */
.format-card-featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent, #ff5a1f) 30%,
        var(--accent, #ff5a1f) 70%,
        transparent 100%);
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   VORGESPRÄCH-OPTION (Sub-CTA unter "Anfrage starten")
   -------------------------------------------------------------------------- */
.hero-preflight,
.final-preflight {
    display: block;
    margin-top: 18px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    background: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.hero-preflight .preflight-arrow,
.final-preflight .preflight-arrow {
    color: var(--accent, #ff5a1f);
    margin-left: 6px;
    display: inline-block;
}

/* Dark variant for Final CTA on dark section */
.section-dark .final-preflight {
    color: rgba(247, 245, 241, 0.5);
}

/* Hero variant on dark image */
.hero .hero-preflight {
    color: rgba(247, 245, 241, 0.55);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .format-badge {
        font-size: 9px;
        padding: 5px 10px;
        letter-spacing: 0.22em;
    }
}

/* --------------------------------------------------------------------------
   ANIMATED COUNT-UP (Proof numbers)
   -------------------------------------------------------------------------- */
.proof-number-value {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   40% BAR ANIMATION (Capacity chart)
   -------------------------------------------------------------------------- */
.capacity-fill {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.capacity-chart.is-visible .capacity-fill {
    transform: scaleX(1);
}
.capacity-marker {
    opacity: 0;
    transition: opacity 400ms ease-out 1400ms;
}
.capacity-chart.is-visible .capacity-marker {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .capacity-fill,
    .capacity-marker {
        transform: scaleX(1);
        opacity: 1;
        transition: none;
    }
}