/* 
 Theme Name:   Lackcenter Karlsruhe
 Theme URI:    
 Description:  Child Theme für Hello Elementor
 Author:       Daniel Ackermann
 Author URI:   https://ackermann-online.com
 Template:     hello-elementor
 Version:      1.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/

/* --- Elementor Lightbox Pfeile sichtbar und nur einmal anzeigen --- */

/* Container nach vorne holen, falls Theme überlagert */
.elementor-lightbox,
.elementor-lightbox .swiper-container,
.elementor-lightbox .swiper-wrapper,
.elementor-lightbox .swiper-slide {
    z-index: 999999 !important;
}

/* Grundstil für die Prev/Next Buttons */
.elementor-lightbox .elementor-swiper-button-prev,
.elementor-lightbox .elementor-swiper-button-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(0,0,0,.55) !important;
    border-radius: 999px !important;

    color: #fff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1000000 !important;
}

/* Position links/rechts */
.elementor-lightbox .elementor-swiper-button-prev {
    left: 20px !important;
}
.elementor-lightbox .elementor-swiper-button-next {
    right: 20px !important;
}

/* Stelle sicher, dass das eigentliche Icon sichtbar ist */
.elementor-lightbox .elementor-swiper-button-prev i,
.elementor-lightbox .elementor-swiper-button-next i,
.elementor-lightbox .elementor-swiper-button-prev svg,
.elementor-lightbox .elementor-swiper-button-next svg,
.elementor-lightbox .eicon-chevron-left,
.elementor-lightbox .eicon-chevron-right {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    width: 24px;
    height: 24px;
    line-height: 1;
}

/* falls das Theme irgendwo :before/:after Icons reinschiebt -> killen */
.elementor-lightbox .elementor-swiper-button-prev:before,
.elementor-lightbox .elementor-swiper-button-next:before,
.elementor-lightbox .elementor-swiper-button-prev:after,
.elementor-lightbox .elementor-swiper-button-next:after {
    content: none !important;
}

/* --- Hover-Styling für Elementor-Lightbox-Pfeile --- */
.elementor-lightbox .elementor-swiper-button-prev,
.elementor-lightbox .elementor-swiper-button-next {
    cursor: pointer !important;  /* Hand-Cursor immer anzeigen */
    transition: all 0.25s ease !important;
}

.elementor-lightbox .elementor-swiper-button-prev:hover,
.elementor-lightbox .elementor-swiper-button-next:hover {
    background-color: #000 !important;           /* schwarzer Kreis */
    transform: translateY(-50%) scale(1.2) !important; /* 20 % größer beim Hover */
}

/* Icon-Farbe blau beim Hover */
.elementor-lightbox .elementor-swiper-button-prev:hover i,
.elementor-lightbox .elementor-swiper-button-next:hover i,
.elementor-lightbox .elementor-swiper-button-prev:hover svg,
.elementor-lightbox .elementor-swiper-button-next:hover svg,
.elementor-lightbox .elementor-swiper-button-prev:hover .eicon-chevron-left,
.elementor-lightbox .elementor-swiper-button-next:hover .eicon-chevron-right {
    color: #00abd7 !important;
    fill: #00abd7 !important;
    stroke: #00abd7 !important;
    transition: all 0.25s ease !important;
}

/* ============================================
   DESIGNER MIT 7 AUGEN - DESIGN SYSTEM
   Stufe 4-5: Lebendig bis Aufgeregt
   ============================================ */

:root {
    /* Primärfarben */
    --lc-primary: #FFEB00;
    --lc-primary-dark: #E5D400;
    --lc-bg-dark: #000000;
    --lc-bg-section: #1D1D1D;
    --lc-bg-card: #292929;

    /* Text */
    --lc-text-primary: #FFFFFF;
    --lc-text-secondary: #9F9F9F;

    /* Orb-Farben (Lackfarben) */
    --orb-yellow: #FFEB00;
    --orb-orange: #FF6B35;
    --orb-red: #FF3366;
    --orb-blue: #00D4FF;
    --orb-purple: #9B59B6;
    --orb-green: #00E676;

    /* Animation Timing */
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --duration-orb: 12s;
    --duration-float: 6s;
}

/* ============================================
   SCHWEBENDE ORB-FARBCLUSTER
   ============================================ */

/* Orb Container - für Sektionen mit Orbs */
.lc-orb-section {
    position: relative;
    overflow: hidden;
}

/* Basis-Orb Styles */
.lc-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

/* Orb Größen */
.lc-orb--sm { width: 150px; height: 150px; filter: blur(40px); }
.lc-orb--md { width: 250px; height: 250px; filter: blur(60px); }
.lc-orb--lg { width: 400px; height: 400px; filter: blur(80px); }
.lc-orb--xl { width: 600px; height: 600px; filter: blur(100px); }

/* Orb Farben */
.lc-orb--yellow { background: radial-gradient(circle, var(--orb-yellow) 0%, transparent 70%); }
.lc-orb--orange { background: radial-gradient(circle, var(--orb-orange) 0%, transparent 70%); }
.lc-orb--red { background: radial-gradient(circle, var(--orb-red) 0%, transparent 70%); }
.lc-orb--blue { background: radial-gradient(circle, var(--orb-blue) 0%, transparent 70%); }
.lc-orb--purple { background: radial-gradient(circle, var(--orb-purple) 0%, transparent 70%); }
.lc-orb--green { background: radial-gradient(circle, var(--orb-green) 0%, transparent 70%); }

/* Float Animationen - verschiedene Pfade */
@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -40px) scale(1.05); }
    50% { transform: translate(-20px, -60px) scale(0.95); }
    75% { transform: translate(-40px, -20px) scale(1.02); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-40px, 30px) scale(0.98); }
    50% { transform: translate(50px, 50px) scale(1.04); }
    75% { transform: translate(20px, -30px) scale(0.96); }
}

@keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(60px, -20px) scale(1.06); }
    66% { transform: translate(-30px, 40px) scale(0.94); }
}

@keyframes orbPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

/* Float Animation Klassen */
.lc-orb--float1 { animation: orbFloat1 var(--duration-orb) ease-in-out infinite; }
.lc-orb--float2 { animation: orbFloat2 calc(var(--duration-orb) * 1.3) ease-in-out infinite; }
.lc-orb--float3 { animation: orbFloat3 calc(var(--duration-orb) * 0.8) ease-in-out infinite; }
.lc-orb--pulse { animation: orbPulse 4s ease-in-out infinite; }

/* ============================================
   ENHANCED SECTION ANIMATIONS (Stufe 4-5)
   ============================================ */

/* Fade-in beim Scrollen */
.lc-animate-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}

.lc-animate-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation für Listen */
.lc-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
}

.lc-stagger.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.lc-stagger.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.lc-stagger.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.lc-stagger.is-visible > *:nth-child(4) { transition-delay: 0.4s; }
.lc-stagger.is-visible > *:nth-child(5) { transition-delay: 0.5s; }
.lc-stagger.is-visible > *:nth-child(6) { transition-delay: 0.6s; }

.lc-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   ENHANCED CARD STYLES
   ============================================ */

.lc-card {
    background: var(--lc-bg-card);
    border-radius: 12px;
    padding: 2rem;
    transition: transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.lc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--orb-yellow), var(--orb-orange), var(--orb-red));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-smooth);
}

.lc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(255, 235, 0, 0.15);
}

.lc-card:hover::before {
    transform: scaleX(1);
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */

.lc-btn-glow {
    position: relative;
    overflow: hidden;
}

.lc-btn-glow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 235, 0, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s var(--ease-smooth);
    pointer-events: none;
}

.lc-btn-glow:hover::after {
    transform: translate(-50%, -50%) scale(1);
}

/* ============================================
   HERO ENHANCEMENTS
   ============================================ */

/* Gradient Overlay mit Bewegung */
.lc-hero-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 235, 0, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%);
    pointer-events: none;
}

/* ============================================
   IMAGE REVEAL ANIMATION
   ============================================ */

.lc-image-reveal {
    position: relative;
    overflow: hidden;
}

.lc-image-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lc-primary);
    transform: translateX(-101%);
    transition: transform 0.8s var(--ease-smooth);
}

.lc-image-reveal.is-visible::after {
    transform: translateX(101%);
}

.lc-image-reveal img {
    transform: scale(1.1);
    transition: transform 1.2s var(--ease-smooth);
}

.lc-image-reveal.is-visible img {
    transform: scale(1);
}

/* ============================================
   TEXT GRADIENT ACCENT
   ============================================ */

.lc-text-gradient {
    background: linear-gradient(135deg, var(--orb-yellow) 0%, var(--orb-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   SECTION DIVIDER WITH PAINT DRIP
   ============================================ */

.lc-divider-paint {
    position: relative;
    height: 60px;
    overflow: hidden;
}

.lc-divider-paint::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath fill='%23FFEB00' d='M0,0 L1200,0 L1200,20 Q1100,25 1000,40 Q900,55 800,30 Q700,5 600,35 Q500,65 400,25 Q300,-15 200,30 Q100,75 0,20 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 1200px 60px;
    animation: paintDrip 8s linear infinite;
}

@keyframes paintDrip {
    0% { background-position-x: 0; }
    100% { background-position-x: 1200px; }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .lc-orb--lg { width: 250px; height: 250px; filter: blur(60px); }
    .lc-orb--xl { width: 350px; height: 350px; filter: blur(70px); }
    .lc-orb { opacity: 0.25; }

    .lc-card:hover {
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lc-orb,
    .lc-animate-in,
    .lc-stagger > *,
    .lc-card,
    .lc-image-reveal,
    .lc-image-reveal img {
        animation: none !important;
        transition: none !important;
    }}