/*
 * SAL Main Blocks CSS
 * Specific styles for SAL Main landing page blocks
 * Built on top of elixxier-01.css - uses existing helper classes where possible
 * Version: 1.0.0
 */

/* ============================================
   GLOBAL TYPOGRAPHY FOR SAL MAIN PAGE
   ============================================ */

/* Globale Text-Utilities - Wiederverwendbare Klassen */
.sal-text-muted,
.sal-text-muted p {
    color: #A1A3A9;
}

.sal-text-white,
.sal-text-white p {
    color: #ffffff;
}

.sal-text-small,
.sal-text-small p {
    font-size: 15px;
}

.sal-text-medium,
.sal-text-medium p {
    font-size: 17px;
}

.sal-text-large,
.sal-text-large p {
    font-size: 20px;
}

/* Alle H2 Überschriften auf der SAL Main Page - Standard */
.sal-main-page h2,
.sal-hero-description h2,
.sal-features-title h2,
.sal-testimonials-title h2,
.sal-faq-title h2,
.sal-trusted-title h2,
.sal-physics-title h2,
.sal-problem-solution-title h2,
.sal-user-story-section h2,
.sal-what-awaits-section h2,
.sal-cta-section h2,
.sal-known-from-section h2 {
    font: normal normal 600 45px/55px var(--font-family-open-sans) !important;
    letter-spacing: -0.9px !important;
    color: #ffffff;
}

/* H2 Variante - Größer für Hero/Feature Sections */
.sal-main-page h2.sal-title-xl,
.sal-v3-hero h2,
.sal-transform-vision-section h2 {
    font-size: 48px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.96px !important;
}

/* Alle H3 Überschriften auf der SAL Main Page */
.sal-main-page h3,
.sal-v3-subtitle h3,
.sal-feature-item-large h3,
.sal-faq-question h3,
.sal-problem-block h3,
.sal-solution-block h3 {
    font: normal normal 600 24px/30px var(--font-family-open-sans) !important;
    letter-spacing: -0.24px !important;
}

/* ============================================
   HERO SECTION
   ============================================ */

.sal-hero-description p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
    line-height: 1.4;
}

/* Feature Items am unteren Rand */
.sal-feature-item {
    margin-bottom: 30px;
    text-align: center;
}

.sal-checkmark {
    color: #00baf7;
    font-size: 18px;
    font-weight: bold;
    margin-right: 6px;
    margin-bottom: 0;
    display: inline;
}

.sal-feature-item p {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin: 0;
    line-height: 1.3;
    display: inline;
}

/* Mobile Responsive Hero */
@media (max-width: 849px) {
    /* Logo größer auf Mobile */
    .sal-main-page .ux_image {
        width: 40% !important;
        max-width: 200px !important;
    }

    /* Verstecke Feature Items auf Mobile */
    .sal-feature-item {
        display: none !important;
    }

    /* Button Text größer */
    .button.is-large {
        font-size: 18px !important;
        font-weight: 600 !important;
    }

    /* Hero Titel responsive */
    .sal-main-page h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .sal-main-page h2 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    /* Hero Description responsive */
    .sal-hero-description p {
        font-size: 16px !important;
    }
}

/* ============================================
   V3 ANNOUNCEMENT SECTION
   ============================================ */

/* ============================================
   SAL V3 PRODUCT HERO SECTION
   ============================================ */

.sal-v3-hero {
    background: linear-gradient(180deg, #17171A 0%, #111112 100%);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* V3 Intro Text - "Meet set.a.light 3D V3" */
.sal-v3-intro-text p {
    font-family: var(--font-family-open-sans);
    font-size: 36px !important;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.40);
    margin-bottom: 20px;
}

/* Main Title */
.sal-v3-main-title h1 {
    font-family: var(--font-family-open-sans);
    font-size: 56px !important;
    line-height: 70px !important;
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 0;
}

/* Hero Description - wiederverwenden der existierenden Klasse */
.sal-v3-hero .sal-hero-description p {
    font-size: 20px;
    line-height: 30px;
    color: #A1A3A9;
    margin: 0;
}

/* Badge/Pill Style für "Now with more precision..." */
.sal-v3-badge {
    display: inline-block;
    background: #2F2F38;
    border-radius: 45px;
    padding: 8px 25px;
}

.sal-v3-badge p {
    color: white;
    font-size: 17px;
    margin: 0;
    font-weight: 500;
}

/* Platform Info - Windows & MacOS */
.sal-platform-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #A1A3A9;
    font-size: 15px;
    font-family: var(--font-family-open-sans);
}

.sal-platform-icons {
    display: flex;
    gap: 8px;
}

.sal-platform-icon {
    width: 22px;
    height: 22px;
    opacity: 0.7;
}

/* Platform Text - nutzt globale Utilities */
.sal-platform-text p {
    font-family: var(--font-family-open-sans);
    margin: 0;
}

/* Screenshot mit Shadow - erweitert die existierende Klasse */
.sal-v3-hero .sal-image-radius-large {
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
}

/* ============================================
   V3 UPGRADE FEATURES SECTION
   ============================================ */

.sal-v3-upgrade {
    background: linear-gradient(180deg, #111112 0%, #17171A 100%);
}

.sal-v3-subtitle p {
    color: #8B8B8B;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin: 0;
}

.sal-v3-upgrade-title h2 {
    font-size: 48px !important;
    line-height: 60px !important;
    font-weight: 400 !important;
    letter-spacing: -1px !important;
}


/* V3 Success Title - spezifisch für diese Section */
.sal-v3-success-title h3 {
    font-size: 31px !important;
    line-height: 38px !important;
}

/* Feature List Items */
.sal-feature-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    margin: 0;
    line-height: 1.4;
}

/* Highlight für letztes Item */
.sal-text-highlight p {
    color: #FFD700;
}


/* Responsive für V3 Upgrade */
@media (max-width: 849px) {
    .sal-v3-upgrade-title h2 {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    .sal-feature-text {
        font-size: 16px;
    }
}

/* Responsive für V3 Hero */
@media (max-width: 849px) {
    .sal-v3-intro-text p {
        font-size: 28px !important;
    }

    .sal-v3-main-title h1 {
        font-size: 36px !important;
        line-height: 45px !important;
    }

    .sal-v3-hero .sal-hero-description p {
        font-size: 18px;
        line-height: 26px;
    }

    .sal-v3-badge p {
        font-size: 15px;
    }
}

/* ============================================
   GLOBAL IMAGE RADIUS CLASSES
   ============================================ */

/* Standard SAL Image Radius - 15px (wie bei Cards, Videos, etc.) */
.sal-image-radius,
.sal-image-radius img {
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* Alternative Radius-Optionen */
.sal-image-radius-small,
.sal-image-radius-small img {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.sal-image-radius-large,
.sal-image-radius-large img {
    border-radius: 25px !important;
    overflow: hidden !important;
}

.sal-image-radius-round,
.sal-image-radius-round img {
    border-radius: 50% !important;
    overflow: hidden !important;
}

/* ============================================
   GLOBAL BUTTON STYLES
   ============================================ */

/* Standard Button Border-Radius */
input[type='submit'],
input[type="button"],
button:not(.icon),
.button:not(.icon) {
    border-radius: 8px !important;
}

/* Button Variants */
.button.secondary {
    border-radius: 8px !important;
}

.button.primary {
    border-radius: 8px !important;
}

/* Für UX Builder Button-Optionen */
.button.radius-none {
    border-radius: 0 !important;
}

.button.radius-small {
    border-radius: 4px !important;
}

.button.radius-large {
    border-radius: 12px !important;
}

.button.radius-round {
    border-radius: 50px !important;
}

.sal-v3-title h2 {
    color: #000000;
    margin-bottom: 0;
    /* Erbt die globale h2 Schriftgröße von .sal-main-page h2 (45px) */
}

.sal-v3-subtitle h3 {
    font-family: var(--font-family-open-sans);
    font-weight: 400;
    color: #000000;
    margin-bottom: 0;
}

.sal-v3-description p {
    font-family: var(--font-family-open-sans);
    color: #666666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* ============================================
   FEATURES SECTION
   ============================================ */

.sal-features-intro p {
    font-family: var(--font-family-open-sans);
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin-bottom: 0;
}

.sal-features-title h2 {
    color: #ffffff;
    margin-bottom: 0;
    max-width: 900px;
    margin: 0 auto;
}

.sal-features-description p {
    font-family: var(--font-family-open-sans);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Feature Items with Icons */
.sal-feature-col {
    margin-bottom: 40px;
}

.sal-feature-item-large {
    padding: 20px;
}

.sal-feature-icon {
    margin-bottom: 25px;
    color: #00baf7;
    display: flex;
    justify-content: center;
}

.sal-feature-icon svg {
    width: 50px;
    height: 50px;
}

.sal-feature-item-large h3 {
    font-family: var(--font-family-open-sans);
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.3;
}

.sal-feature-item-large p {
    font-family: var(--font-family-open-sans);
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   PROBLEM SOLUTION SECTION
   ============================================ */

.sal-problem-solution-title h2 {
    color: #ffffff;
    margin-bottom: 40px;
}

.sal-problem-block {
    margin-bottom: 30px;
}

.sal-problem-block h3 {
    font-family: var(--font-family-open-sans);
    font-weight: 700;
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 10px;
}

.sal-problem-block p,
.sal-solution-block p {
    font-family: var(--font-family-open-sans);
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.sal-solution-block {
    margin-bottom: 40px;
}

.sal-solution-block h3 {
    font-family: var(--font-family-open-sans);
    font-weight: 700;
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 10px;
}

.sal-problem-image {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 500px;
}

.sal-problem-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/* Benefits Section - Vereinfacht für UX Builder */
.sal-benefits-row {
    margin-top: 80px;
}

/* ============================================
   MASTER YOUR LIGHTING SECTION
   ============================================ */

/* Nur spezifische Anpassungen, Rest über Flatsome */
.sal-feature-category h3:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    background: #ffffff;
    width: 100%;
    max-width: 347px;
}

.sal-feature-category h3 {
    position: relative;
}

/* ============================================
   CREATIVE VISION BOXES SECTION
   ============================================ */

/* Gradient Top Border Effekt */
.sal-creative-box-artists .col-inner,
.sal-creative-box-photographers .col-inner,
.sal-creative-box-filmmakers .col-inner {
    position: relative !important;
    border-radius: 15px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Gradient Borders mit Pseudo-Element für border-radius Kompatibilität */
.sal-creative-box-artists .col-inner {
    position: relative;
    padding: 1px !important;
    background: linear-gradient(180deg, #5AC6AD 0%, rgba(90, 198, 173, 0.3) 100%) !important;
    border-radius: 15px !important;
}

.sal-creative-box-photographers .col-inner {
    position: relative;
    padding: 1px !important;
    background: linear-gradient(180deg, #9093FF 0%, rgba(144, 147, 255, 0.3) 100%) !important;
    border-radius: 15px !important;
}

.sal-creative-box-filmmakers .col-inner {
    position: relative;
    padding: 1px !important;
    background: linear-gradient(180deg, #FFBE2B 0%, rgba(255, 190, 43, 0.3) 100%) !important;
    border-radius: 15px !important;
}

/* Inner Content - Featured Box */
.sal-creative-box-artists .featured-box,
.sal-creative-box-photographers .featured-box {
    background: #27282A !important;
    border-radius: 15px !important;
    padding: 30px 20px !important;
    margin: 0 !important;
    position: relative;
    z-index: 2;
    min-height: 370px;
    box-sizing: border-box !important;
}

.sal-creative-box-filmmakers .featured-box {
    background: #27282A !important;
    border-radius: 15px !important;
    padding: 30px 20px !important;
    margin: 0 !important;
    position: relative;
    z-index: 2;
    min-height: 370px;
    box-sizing: border-box !important;
}

/* Icon Links-Alignment */
.sal-creative-box-artists .box-image,
.sal-creative-box-photographers .box-image,
.sal-creative-box-filmmakers .box-image {
    margin-bottom: 15px !important;
    margin-right: 15px !important;
    float: left !important;
}

/* Titel und Content */
.sal-creative-box-artists .featured-box h3,
.sal-creative-box-photographers .featured-box h3,
.sal-creative-box-filmmakers .featured-box h3 {
    color: #ffffff !important;
    font-family: var(--font-family-open-sans) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
}

.sal-creative-box-artists .featured-box p,
.sal-creative-box-photographers .featured-box p,
.sal-creative-box-filmmakers .featured-box p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: var(--font-family-open-sans) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
}

/* Listen-Styles */
.sal-creative-box-artists ul,
.sal-creative-box-photographers ul,
.sal-creative-box-filmmakers ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sal-creative-box-artists li,
.sal-creative-box-photographers li,
.sal-creative-box-filmmakers li {
    position: relative !important;
    padding-left: 25px !important;
    margin-bottom: 10px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: var(--font-family-open-sans) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Checkmarks für Listen */
.sal-creative-box-artists li:before,
.sal-creative-box-photographers li:before,
.sal-creative-box-filmmakers li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 9px;
    height: 6px;
    border: 2px solid #63E5E6;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

/* Korrekte Positionierung für inline styles */
.sal-creative-box-artists li,
.sal-creative-box-photographers li,
.sal-creative-box-filmmakers li {
    position: relative !important;
    padding-left: 20px !important;
}

/* ============================================
   USER STORY TESTIMONIAL SECTION
   ============================================ */

.sal-user-story-section {
    /* Background und Padding über Section-Einstellungen gesteuert */
}

/* USER STORY Badge mit Gradient Border */
.sal-user-story-badge {
    display: inline-block;
    padding: 1px;
    border-radius: 25px;
    background: linear-gradient(90deg, #5AC6AD 0%, #7307db 100%);
    margin-bottom: 40px;
    width: auto;
}

.sal-user-story-badge-inner {
    padding: 8px 20px;
    border-radius: 24px;
    background: #18181b;
    display: inline-block;
}

.sal-user-story-badge p {
    color: #5AC6AD;
    font-family: var(--font-family-open-sans);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    display: inline;
    line-height: 1;
}

.sal-user-story-badge br {
    display: none;
}

/* Fix für leere spans */
.sal-user-story-badge-inner:empty {
    display: none;
}

/* Quote Text */
.sal-user-story-quote h2 {
    color: #ffffff !important;
    font-style: italic !important;
    margin: 0 !important;
    margin-bottom: 40px !important;
}

.sal-user-story-quote h2::before {
    content: '"';
    color: #ffffff;
}

.sal-user-story-quote h2::after {
    content: '"';
    color: #ffffff;
}

/* Author Info with Avatar */
.sal-user-story-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sal-user-story-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sal-user-story-author-info h4 {
    font-family: var(--font-family-open-sans) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.2 !important;
}

.sal-user-story-author-info p {
    font-family: var(--font-family-open-sans) !important;
    color: #BEBEBE !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Video Thumbnail */
.sal-user-story-video {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    height: 400px;
    background: #27282A;
}

.sal-user-story-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.sal-user-story-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.sal-user-story-play-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

.sal-user-story-play-btn::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 20px solid #333333;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 4px;
}

/* ============================================
   WHAT AWAITS YOU SECTION
   ============================================ */

.sal-what-awaits-section {
    /* Background über Section-Einstellungen gesteuert */
}

.sal-what-awaits-title h2 {
    color: #ffffff !important;
    margin: 0 !important;
}

.sal-what-awaits-grid {
    margin-top: 0;
}

.sal-what-awaits-item {
    margin-bottom: 60px;
}

.sal-what-awaits-block h4 {
    font-family: var(--font-family-open-sans);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 0 15px 0;
    letter-spacing: -0.2px;
}

.sal-what-awaits-block p {
    font-family: var(--font-family-open-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Responsive Anpassungen */
@media (max-width: 849px) {
    .sal-what-awaits-item {
        margin-bottom: 40px;
    }

}

/* ============================================
   CTA SECTION - TAKE YOUR PREVISUALIZATION
   ============================================ */

.sal-cta-section {
    /* Background über Section-Einstellungen gesteuert */
    position: relative;
}

.sal-cta-logo {
    margin: 0 auto;
}

.sal-cta-title h2 {
    color: #ffffff;
    margin: 0 auto;
    max-width: 1300px;
}

.sal-cta-description p {
    font-family: var(--font-family-open-sans);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    margin: 0 auto;
    max-width: 859px;
}

/* Button-Styles werden über Flatsome-Einstellungen gesteuert */

/* ============================================
   AUTHENTIC LIGHTING PHYSICS SECTION
   ============================================ */

.sal-physics-title h2 {
    color: #ffffff;
    margin-bottom: 0;
}

.sal-physics-description {
    margin: 25px 0 40px 0;
}

.sal-physics-description p {
    font-family: var(--font-family-open-sans);
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
}

.sal-physics-description .normal {
    color: #BEBEBE;
    font-weight: 400;
}

.sal-physics-description .highlight {
    color: #ffffff;
    font-weight: 700;
}

.sal-physics-features {
    margin: 40px 0;
}

.sal-physics-feature {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.sal-physics-checkmark {
    width: 28px;
    height: 28px;
    background: #000000;
    border-radius: 50%;
    position: relative;
    margin-right: 15px;
    flex-shrink: 0;
}

.sal-physics-checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #63E5E6;
    font-weight: bold;
    font-size: 16px;
}

.sal-physics-feature p {
    font-family: var(--font-family-inter);
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

.sal-physics-card {
    background: #222326;
    border-radius: 15px;
    padding: 40px;
    height: 540px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.sal-physics-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 480px;
    height: 263px;
    background: linear-gradient(163deg, #6526DB 0%, #93D1FF 100%);
    z-index: 1;
}

.sal-physics-quote {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 40px;
}

.sal-physics-quote p {
    font-family: var(--font-family-open-sans);
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}

.sal-physics-author {
    position: relative;
    z-index: 2;
    text-align: center;
}

.sal-physics-author p {
    font-family: var(--font-family-open-sans);
    color: #ffffff;
    font-size: 17px;
    margin: 0;
    line-height: 1.76;
}

.sal-physics-author .name {
    font-weight: 700;
}

.sal-physics-author .title {
    font-weight: 300;
}

/* ============================================
   TRUSTED BY PROFESSIONALS SECTION
   ============================================ */

.sal-trusted-title h2 {
    color: #ffffff;
    margin-bottom: 0;
}

.sal-trusted-description p {
    font-family: var(--font-family-open-sans);
    color: #BEBEBE;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1075px;
}

.sal-trusted-gallery {
    position: relative;
    overflow: hidden;
    margin: 70px 0;
}

.sal-trusted-slider .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sal-trusted-slider .row::-webkit-scrollbar {
    display: none;
}

.sal-trusted-card {
    position: relative;
    width: 325px;
    height: 493px;
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
    scroll-snap-align: center;
}

.sal-trusted-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.sal-trusted-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 195px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    border-radius: 0 0 15px 15px;
}

.sal-trusted-name {
    position: absolute;
    bottom: 23px;
    left: 23px;
    font-family: var(--font-family-inter);
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
}

.sal-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.46);
}

.sal-nav-arrow:hover {
    background: rgba(0, 0, 0, 0.9);
}

.sal-nav-arrow.prev {
    left: 20px;
}

.sal-nav-arrow.next {
    right: 20px;
}

.sal-nav-arrow svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}

/* ============================================
   KNOWN FROM LOGO SLIDER SECTION
   ============================================ */

.sal-known-from-section {
    /* Background wird über Section-Einstellungen gesteuert */
}

.sal-known-from-intro p {
    font-family: var(--font-family-open-sans) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin: 0 0 30px 0 !important;
    line-height: 1.4 !important;
}

.sal-logo-slider-container {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
}

/* Gradient Fade Edges */
.sal-logo-slider-container::before,
.sal-logo-slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.sal-logo-slider-container::before {
    left: 0;
    background: linear-gradient(90deg, #18181b 0%, rgba(24, 24, 27, 0) 100%);
}

.sal-logo-slider-container::after {
    right: 0;
    background: linear-gradient(270deg, #18181b 0%, rgba(24, 24, 27, 0) 100%);
}

.sal-logo-slider-track {
    display: flex !important;
    width: fit-content !important;
    /* GESCHWINDIGKEIT: Kleinere Zahl = schneller, Größere Zahl = langsamer */
    animation: sal-infinite-scroll 30s linear infinite !important;
}

.sal-logo-slider-items {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 0 20px !important;
    width: max-content !important;
}

.sal-logo-slider-items img {
    max-height: 45px !important;
    width: auto !important;
    filter: grayscale(100%) brightness(0.6) !important;
    transition: all 0.3s ease !important;
    opacity: 0.8 !important;
    flex-shrink: 0 !important;
}

.sal-logo-slider-items img:hover {
    filter: grayscale(0%) brightness(1) !important;
    opacity: 1 !important;
}

/* Animation für nahtlosen Loop mit 11 Logos pro Container */
@keyframes sal-infinite-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Mit 11 Logos à ~150px Breite + 40px gap = ca. 2090px pro Container
           Plus 80px padding = ca. 2170px
           Wir müssen genau eine Container-Breite nach links */
        transform: translateX(calc(-100% / 2));
    }
}

/* ============================================
   TRANSFORM VISION SECTION
   ============================================ */

.sal-transform-vision-section {
    background: linear-gradient(180deg, #17171A 0%, #111112 100%);
}

.sal-transform-vision-section h2 {
    max-width: 900px;
    margin: 0 auto;
}

.sal-transform-description p {
    font-family: var(--font-family-open-sans);
    color: #A1A3A9;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

.sal-transform-image {
    width: 100%;
    height: auto;
}

/* Mobile Anpassungen */
@media (max-width: 549px) {
    .sal-transform-vision-section h2 {
        font-size: 32px !important;
        letter-spacing: -0.64px !important;
    }

    .sal-transform-description p {
        font-size: 16px;
    }
}

/* ============================================
   AUTHENTIC LIGHTING SECTION
   ============================================ */

.sal-authentic-lighting-section {
    background: linear-gradient(180deg, #17171A 0%, #111112 100%);
}

.sal-physics-list p {
    color: #00FF94;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 12px;
    font-family: var(--font-family-open-sans);
    position: relative;
    padding-left: 30px;
}

.sal-physics-list p:before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 600;
}

.sal-founder-box {
    background: rgb(30,30,35);
    padding: 50px;
    border-radius: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sal-founder-quote-text {
    background: linear-gradient(135deg, #73A7FF 0%, #A773FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
}

/* ============================================
   ANIMATION TOOL SECTION
   ============================================ */

.sal-animation-tool-section {
    background: linear-gradient(180deg, #17171A 0%, #111112 100%);
}

/* ============================================
   ANIMATION FEATURES SECTION
   ============================================ */

.sal-animation-features-section {
    margin-top: -60px;
}

.sal-feature-box-border {
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s ease;
}

.sal-feature-box-border:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.sal-feature-box-border h3 {
    color: #ffffff;
    font-weight: 400;
}

/* New Badge für die Bilder */
.sal-new-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #ffffff;
    color: #000000;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* ============================================
   NATURAL LIGHT SECTION
   ============================================ */

.sal-natural-light-section {
    background: linear-gradient(180deg, #17171A 0%, #111112 100%);
}

.sal-natural-light-section .img.radius-12 img,
.sal-natural-light-section .radius-12 img {
    border-radius: 12px !important;
}

/* ============================================
   CREATORS GALLERY SECTION
   ============================================ */

.sal-creators-gallery-section {
    background: linear-gradient(180deg, #17171A 0%, #111112 100%);
    overflow: hidden;
}

.sal-creators-slider-container {
    width: 100vw;
    overflow: hidden;
    position: relative;
}

.sal-creators-slider-track {
    display: flex;
    width: fit-content;
}

.sal-creators-slider-items {
    display: flex;
    gap: 10px;
    animation: slideCreators 30s linear infinite;
    flex-shrink: 0;
    padding-right: 10px;
}

@keyframes slideCreators {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

img.sal-creator-image {
    height: 248px !important;
    width: auto !important;
    border-radius: 12px !important;
    object-fit: cover;
    flex: 0 0 auto;
    display: inline-block;
}

/* Pause on hover */
.sal-creators-slider-container:hover .sal-creators-slider-items {
    animation-play-state: paused;
}

/* Mobile Anpassungen */
@media (max-width: 549px) {
    .sal-creators-slider-items {
        animation-duration: 30s;
    }

    img.sal-creator-image {
        height: 180px !important;
    }
}


/* ============================================
   PHOTO & CINEMA LIGHTING EQUIPMENT SECTION
   ============================================ */

.sal-lighting-equipment-section {
    background: linear-gradient(180deg, #111112 0%, #17171A 100%);
}

.sal-lighting-equipment-section h2,
.sal-lighting-equipment-section .sal-section-title h2 {
    font-size: 45px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -0.9px !important;
    color: #ffffff !important;
}

.sal-lighting-equipment-section .uppercase {
    font-size: 15px !important;
    letter-spacing: 1px;
}

.sal-equipment-number {
    font-size: 30px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    font-family: var(--font-family-open-sans) !important;
    line-height: 1.2;
}

.sal-underline {
    text-decoration: underline !important;
    text-underline-offset: 8px !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: #ffffff !important;
}

/* ============================================
   CAMERA EQUIPMENT SECTION
   ============================================ */

.sal-camera-equipment-section {
    background: linear-gradient(180deg, #17171A 0%, #111112 100%);
}

.sal-camera-equipment-section h2 {
    font-size: 45px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -0.9px !important;
    color: #ffffff !important;
}

.sal-camera-equipment-section h3 {
    font-size: 36px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: -0.72px !important;
    color: #ffffff !important;
}

/* ============================================
   CHOOSE VERSION SECTION
   ============================================ */

.sal-choose-version-section {
    background: linear-gradient(180deg, #111112 0%, #17171A 100%);
}

.sal-choose-version-section h2 {
    font-size: 45px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -0.9px !important;
    color: #ffffff !important;
}

.sal-benefits-title h3 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.sal-benefits-list p {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #ffffff !important;
    margin-bottom: 15px !important;
}

.sal-version-box {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

.sal-version-box:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-5px);
}

.sal-version-title h3 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.sal-studio-title h3 {
    color: #6B7CFF !important;
}

.sal-cinema-title h3 {
    background: linear-gradient(90deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fix für Text in Banner-Boxen */
.sal-version-box .text p,
.sal-version-box .sal-text-small p {
    font-size: 13px !important;
    color: #A1A3A9 !important;
    margin-bottom: 10px !important;
}

.sal-version-box .sal-feature-list {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #ffffff !important;
}

.sal-version-box .sal-feature-list p {
    color: #ffffff !important;
    font-size: 15px !important;
}

.sal-logo-v3 {
    margin-bottom: 20px;
}

/* ============================================
   TESTIMONIAL & STUDIO SECTION
   ============================================ */

.sal-testimonial-studio-section {
    background: linear-gradient(180deg, #17171A 0%, #111112 100%);
}

/* Großes Testimonial Quote */
.sal-testimonial-quote-large {
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #ffffff;
    font-style: italic;
    letter-spacing: -0.72px !important;
}

.sal-testimonial-author p {
    font-family: var(--font-family-open-sans);
    color: #A1A3A9;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.sal-studio-description p {
    font-family: var(--font-family-open-sans);
    color: #A1A3A9;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

/* Mobile Anpassungen */
@media (max-width: 549px) {
    .sal-testimonial-quote-large {
        font-size: 28px !important;
        letter-spacing: -0.56px !important;
    }

    .sal-studio-description p {
        font-size: 16px;
        line-height: 24px;
    }
}

/* ============================================
   HORIZONTAL GALLERY SLIDER SECTION
   ============================================ */

.sal-gallery-slider-section {
    background: #111112;
    padding: 0;
    margin-left: -50% !important;
    margin-right: -50% !important;
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
}

.sal-gallery-slider-section .section-content {
    padding: 0 !important;
    max-width: none !important;
}

.sal-gallery-slider-section .row-collapse {
    margin: 0 !important;
    max-width: none !important;
}

.sal-gallery-slider-section .col-inner {
    padding: 0 !important;
}

/* Horizontaler Scroll Container */
.sal-horizontal-scroll-container {
    width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
}

.sal-horizontal-scroll-container::-webkit-scrollbar {
    display: none;
}

.sal-horizontal-scroll-container:active {
    cursor: grabbing;
}

.sal-horizontal-scroll-track {
    display: flex;
    gap: 8px;
    width: max-content;
    padding: 0;
}

.sal-gallery-image {
    flex: 0 0 auto;
    width: auto !important;
}

.sal-gallery-image .img-inner {
    padding-top: 0 !important;
    height: 360px !important;
    overflow: hidden;
    border-radius: 10px;
}

.sal-gallery-image img {
    height: 360px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    position: relative !important;
    border-radius: 10px;
}

/* Mobile Anpassungen */
@media (max-width: 549px) {
    .sal-gallery-image .img-inner {
        height: 240px !important;
    }

    .sal-gallery-image img {
        height: 240px !important;
    }
}

/* Mobile: Static Display */
@media (max-width: 849px) {
    .sal-logo-slider-container {
        overflow: visible !important;
    }

    .sal-logo-slider-container::before,
    .sal-logo-slider-container::after {
        display: none !important;
    }

    .sal-logo-slider-track {
        animation: none !important;
        width: 100% !important;
    }

    .sal-logo-slider-items {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    .sal-logo-slider-items:last-child {
        display: none !important;
    }

    .sal-logo-slider-items img {
        max-height: 40px !important;
    }
}

/* ============================================
   FAQ SECTION
   ============================================ */

.sal-faq-title h2 {
    color: #ffffff;
    margin-bottom: 0;
}

.sal-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 25px 0;
}

.sal-faq-question {
    position: relative;
    cursor: pointer;
    padding-right: 30px;
}

.sal-faq-question h3 {
    font-family: var(--font-family-inter);
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    line-height: 1.25;
}

.sal-faq-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 8px;
    background: #ffffff;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: transform 0.3s ease;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.58);
}

.sal-faq-question.expanded .sal-faq-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.sal-faq-answer {
    margin-top: 20px;
    padding-right: 30px;
}

.sal-faq-answer p {
    font-family: var(--font-family-open-sans);
    color: #BEBEBE;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */

/* Flickity Dots Position für Testimonials */
.flickity-page-dots {
    bottom: 5px !important;
}

.sal-testimonials-intro p {
    font-family: var(--font-family-open-sans);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.sal-testimonials-quote p {
    font-family: var(--font-family-open-sans);
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    font-style: italic;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

.sal-testimonials-title h2 {
    color: #ffffff;
    margin-bottom: 0;
}

/* Testimonials Slider gleichmäßige Höhe */
.sal-testimonials-slider .row-inner {
    display: flex;
    align-items: stretch;
}

.sal-testimonials-slider .col-inner {
    display: flex;
    flex-direction: column;
}

/* Testimonials Clean Cards */
.sal-testimonial-card-clean {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px 20px 70px 20px;
    height: 280px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.sal-stars-left {
    color: #ffd700;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-align: left;
    flex-shrink: 0;
}

.testimonial-quote-compact {
    font-family: var(--font-family-open-sans);
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.4;
    font-style: italic;
    margin-bottom: 0;
    flex-grow: 1;
    overflow: hidden;
    text-align: left;
}

.testimonial-author-bottom {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
}

.testimonial-avatar-small {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    order: 1;
}

.testimonial-info-right {
    order: 2;
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
}

.testimonial-info-right strong {
    font-family: var(--font-family-open-sans);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    display: inline;
    margin-right: 8px;
    line-height: 1.2;
}

.testimonial-role-small {
    font-family: var(--font-family-open-sans);
    color: #00baf7;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    display: inline;
}

.sal-stars {
    color: #ffd700;
    font-size: 18px;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-align: center;
}

.testimonial-quote {
    font-family: var(--font-family-open-sans);
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 25px;
    flex-grow: 1;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    margin-top: auto;
    gap: 15px;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-info {
    flex-grow: 1;
}

.testimonial-info strong {
    font-family: var(--font-family-open-sans);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 3px;
}

.testimonial-role {
    font-family: var(--font-family-open-sans);
    color: #00baf7;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   UNIVERSAL FEATURE BLOCKS HEADLINES
   Verwendung: class="sal-feature-blocks" zur Row hinzufügen
   ============================================ */

.sal-feature-blocks h3,
.sal-feature-blocks .ux-text h3 {
    font-size: 20px !important;
    line-height: 26px !important;
    font-weight: 600 !important;
    font-family: var(--font-family-open-sans) !important;
    letter-spacing: -0.4px !important;
    color: #ffffff !important;
    margin: 0 0 15px 0 !important;
}

/* Override für Flatsome ux_text default styles */
.sal-feature-blocks .ux-text[font_size="1.5rem"] h3 {
    font-size: 20px !important;
}

/* Abgerundete Ecken für Bilder in Feature Blocks */
.sal-feature-blocks .radius-12 img,
.sal-feature-blocks .img.radius-12 img,
.sal-feature-blocks img.radius-12 {
    border-radius: 12px !important;
}