/* ========================================
   Fenyx Scroll-Line: Base & Variables
   Unterstützt beide Wrapper: Cards + Sections
   ======================================== */
.fnx-line-wrap,
.fnx-sections-wrap {
    --fnx-neon: #CCFF00;
    --fnx-neon-dim: rgba(204, 255, 0, 0.2);
    --fnx-neon-bg: rgba(204, 255, 0, 0.15);
    --fnx-line-offset: -24px;
    position: relative;
    overflow: hidden;
}

/* SVG Lines Container */
.fnx-line-wrap .fnx-svg,
.fnx-sections-wrap .fnx-svg {
    position: absolute;
    inset: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Cards über der Linie */
.fnx-line-wrap .card-link,
.fnx-sections-wrap .card-link {
    position: relative;
    z-index: 2;
}

.fnx-line-wrap .fnx-svg path.fnx-line-bg,
.fnx-sections-wrap .fnx-svg path.fnx-line-bg {
    stroke: var(--fnx-neon-bg);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.fnx-line-wrap .fnx-svg path.fnx-line-fg,
.fnx-sections-wrap .fnx-svg path.fnx-line-fg {
    stroke: var(--fnx-neon);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Trigger & Anchors */
.fnx-line-wrap .fnx-trigger,
.fnx-sections-wrap .fnx-trigger {
    position: absolute;
    width: 0;
    pointer-events: none;
}

.fnx-line-wrap [data-fnx-anchor],
.fnx-sections-wrap [data-fnx-anchor] {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Decorative Blobs */
.fnx-line-wrap .fnx-blob {
    position: absolute;
    border-radius: 50%;
    background: var(--fnx-neon);
    filter: blur(80px);
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

.fnx-line-wrap .fnx-blob-1 { width: 400px; height: 400px; top: 0; right: -150px; }
.fnx-line-wrap .fnx-blob-2 { width: 300px; height: 300px; top: 40%; left: -100px; }
.fnx-line-wrap .fnx-blob-3 { width: 350px; height: 350px; bottom: 20%; right: -100px; }

/* Line Connection Area */
.fnx-line-wrap .fnx-line-area,
.fnx-line-area {
    position: relative;
    height: 60px;
}

@media (min-width: 768px) {
    .fnx-line-wrap .fnx-line-area,
    .fnx-line-area {
        height: 150px;
    }
}

@media (max-width: 767px) {
    .fnx-line-wrap .fnx-line-area,
    .fnx-line-area {
        height: 40px;
    }
}

/* ========================================
   Neon Tag Variant (for Solution Cards)
   ======================================== */
.fnx-line-wrap .tag.neon {
    background: var(--fnx-neon);
    color: #000;
}

/* ========================================
   Solution Card Overlay Fix
   → Text ÜBER dem Bild, nicht darunter
   ======================================== */
.fnx-line-wrap .card-link[data-fnx-card] .grid-layout.desktop-1-column {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.fnx-line-wrap .card-link[data-fnx-card] .grid-layout.desktop-1-column > * {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.fnx-line-wrap .card-link[data-fnx-card] .utility-text-on-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
}

.fnx-line-wrap .card-link[data-fnx-card] .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

/* ========================================
   Section Layout (Serpentine)
   ======================================== */
.fnx-line-wrap .fnx-section-inner,
.fnx-sections-wrap .fnx-section-inner {
    position: relative;
    padding: 3rem 0;
}

@media (min-width: 768px) {
    .fnx-line-wrap .fnx-section-inner,
    .fnx-sections-wrap .fnx-section-inner {
        padding: 4rem 0;
    }
}

@media (max-width: 767px) {
    .fnx-line-wrap .fnx-section-inner,
    .fnx-sections-wrap .fnx-section-inner {
        padding-left: 2.5rem;
    }
}

.fnx-line-wrap .fnx-service-content,
.fnx-sections-wrap .fnx-service-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .fnx-line-wrap .fnx-service-content,
    .fnx-sections-wrap .fnx-service-content {
        flex-direction: row;
        gap: 3rem;
    }
    .fnx-line-wrap .fnx-service-content.fnx-reverse,
    .fnx-sections-wrap .fnx-service-content.fnx-reverse {
        flex-direction: row-reverse;
    }
}

.fnx-line-wrap .fnx-col,
.fnx-sections-wrap .fnx-col { flex: 1; }

.fnx-line-wrap .fnx-col-details,
.fnx-sections-wrap .fnx-col-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {
    .fnx-line-wrap .fnx-col-right,
    .fnx-sections-wrap .fnx-col-right { text-align: right; }
    .fnx-line-wrap .fnx-check-list-right li,
    .fnx-sections-wrap .fnx-check-list-right li { flex-direction: row-reverse; }
    .fnx-line-wrap .fnx-col-right .button-group,
    .fnx-sections-wrap .fnx-col-right .button-group { justify-content: flex-end; }
}

@media (max-width: 767px) {
    .fnx-line-wrap .fnx-col-right,
    .fnx-sections-wrap .fnx-col-right { text-align: left !important; }
    .fnx-line-wrap .fnx-check-list-right li,
    .fnx-sections-wrap .fnx-check-list-right li { flex-direction: row !important; }
    .fnx-line-wrap .fnx-col-right .button-group,
    .fnx-sections-wrap .fnx-col-right .button-group { justify-content: flex-start !important; }
}

/* Check List */
.fnx-line-wrap .fnx-check-list,
.fnx-sections-wrap .fnx-check-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.fnx-line-wrap .fnx-check-list li,
.fnx-sections-wrap .fnx-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.fnx-line-wrap .fnx-check-list li::before,
.fnx-sections-wrap .fnx-check-list li::before {
    content: '';
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CCFF00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ========================================
   Diamond Markers
   ======================================== */
.fnx-line-wrap .fnx-diamond,
.fnx-sections-wrap .fnx-diamond {
    position: absolute;
    z-index: 10;
    transform: translate(-50%, -50%) rotate(45deg);
}

.fnx-line-wrap .fnx-diamond-outer,
.fnx-sections-wrap .fnx-diamond-outer {
    width: 0.75rem;
    height: 0.75rem;
    backdrop-filter: blur(40px);
    background: rgba(204, 255, 0, 0.05);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.fnx-line-wrap .fnx-diamond-inner,
.fnx-sections-wrap .fnx-diamond-inner {
    width: 0.375rem;
    height: 0.375rem;
    background: rgba(204, 255, 0, 0.2);
    box-shadow: none;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.fnx-line-wrap .fnx-diamond-outer.fnx-diamond-active,
.fnx-sections-wrap .fnx-diamond-outer.fnx-diamond-active { background: var(--fnx-neon-bg); }
.fnx-line-wrap .fnx-diamond-inner.fnx-diamond-active,
.fnx-sections-wrap .fnx-diamond-inner.fnx-diamond-active { background: var(--fnx-neon); box-shadow: 0 0 10px var(--fnx-neon); }

@media (min-width: 768px) {
    .fnx-line-wrap .fnx-diamond-outer,
    .fnx-sections-wrap .fnx-diamond-outer { width: 1.25rem; height: 1.25rem; }
    .fnx-line-wrap .fnx-diamond-inner,
    .fnx-sections-wrap .fnx-diamond-inner { width: 0.5rem; height: 0.5rem; }
}

.fnx-line-wrap .fnx-diamond-mobile,
.fnx-sections-wrap .fnx-diamond-mobile { display: none; }

@media (max-width: 767px) {
    .fnx-line-wrap .fnx-diamond[style*="right:"],
    .fnx-sections-wrap .fnx-diamond[style*="right:"] { display: none !important; }
    .fnx-line-wrap .fnx-diamond-mobile,
    .fnx-sections-wrap .fnx-diamond-mobile { display: block !important; left: 16px !important; }
    .fnx-line-wrap .fnx-section-inner .fnx-diamond:not(.fnx-diamond-mobile),
    .fnx-sections-wrap .fnx-section-inner .fnx-diamond:not(.fnx-diamond-mobile) { left: 16px !important; }
    .fnx-line-wrap #fnx-transition-section .container,
    .fnx-sections-wrap #fnx-transition-section .container { padding-left: 2.5rem; }
    .fnx-line-wrap .section:last-of-type .container,
    .fnx-sections-wrap .section:last-of-type .container { padding-left: 2.5rem; }
}

/* ========================================
   Collapsible Description
   ======================================== */
.fnx-line-wrap .fnx-collapsible,
.fnx-sections-wrap .fnx-collapsible { margin-top: 1rem; }

.fnx-line-wrap .fnx-collapsible-toggle,
.fnx-sections-wrap .fnx-collapsible-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--fnx-neon);
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease;
}

.fnx-line-wrap .fnx-collapsible-toggle:hover,
.fnx-sections-wrap .fnx-collapsible-toggle:hover { opacity: 0.8; }
.fnx-line-wrap .fnx-collapsible-toggle svg,
.fnx-sections-wrap .fnx-collapsible-toggle svg { width: 1rem; height: 1rem; transition: transform 0.3s ease; }
.fnx-line-wrap .fnx-collapsible-toggle.fnx-open svg,
.fnx-sections-wrap .fnx-collapsible-toggle.fnx-open svg { transform: rotate(180deg); }

.fnx-line-wrap .fnx-collapsible-content,
.fnx-sections-wrap .fnx-collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}

.fnx-line-wrap .fnx-collapsible-content.fnx-open,
.fnx-sections-wrap .fnx-collapsible-content.fnx-open { max-height: 500px; opacity: 1; }
.fnx-line-wrap .fnx-collapsible-content p,
.fnx-sections-wrap .fnx-collapsible-content p { padding-top: 1rem; }

/* Result Box */
.fnx-line-wrap .fnx-result,
.fnx-sections-wrap .fnx-result {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(204, 255, 0, 0.05);
    border-left: 2px solid var(--fnx-neon);
}

.fnx-line-wrap .fnx-result-label,
.fnx-sections-wrap .fnx-result-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fnx-neon);
    margin-bottom: 0.5rem;
}

/* ========================================
   Fullscreen Background System
   ======================================== */
.fnx-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    visibility: hidden; /* Komplett versteckt wenn nicht im Embed-Bereich */
}

.fnx-bg-container.fnx-bg-in-view {
    visibility: visible; /* Sichtbar nur wenn im Embed-Bereich */
}

.fnx-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.fnx-bg-slide.fnx-bg-active { opacity: 1; }

.fnx-bg-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 8s ease-out;
}

.fnx-bg-slide.fnx-bg-active img { transform: scale(1); }

.fnx-bg-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(3,3,3,0.7) 0%, rgba(3,3,3,0.5) 30%, rgba(3,3,3,0.6) 70%, rgba(3,3,3,0.9) 100%);
}

.fnx-line-wrap .fnx-section-inner[data-fnx-section],
.fnx-sections-wrap .fnx-section-inner[data-fnx-section] { background: transparent; }
.fnx-line-wrap .section,
.fnx-sections-wrap .section { position: relative; z-index: 2; }

.fnx-bg-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(3, 3, 3, 0.95);
    z-index: 1;
    opacity: 0; /* Default: versteckt */
    transition: opacity 0.8s ease;
    pointer-events: none;
}

/* Dark overlay nur während Section-Transitions, NICHT beim Enter/Exit */
.fnx-bg-container.fnx-bg-transitioning::before { opacity: 1; }

/* ========================================
   Stats Theme: Schwarze Linien
   ======================================== */
.fnx-stats-theme {
    --fnx-neon: #000000;
    --fnx-neon-bg: rgba(0, 0, 0, 0.15);
    --fnx-neon-dim: rgba(0, 0, 0, 0.2);
}