/**
 * Custom CSS for Elementor Front Page Migration
 *
 * Forces pixel-perfect reproduction of the original front-page.php design.
 * Elementor JSON import doesn't apply _css_classes on containers, and some
 * settings (position:absolute, overlay-opacity, widths) are unreliable.
 *
 * This file targets elements by their Elementor data-id attributes for containers,
 * and by widget CSS classes where those work correctly.
 *
 * Loaded via wp_enqueue_style in functions.php when Elementor is active.
 *
 * Element Map (data-id → Section):
 *   72785fc5 = Hero Section (e-parent)
 *   28153253 = Hero Content Container (e-child)
 *   2d1556f8 = Oil Drop Container (e-child, absolute)
 *   6db87a92 = CTA Box Container (e-child, absolute)
 *   5aa7328b = Quick Navigation Section (e-parent)
 *   62a7b8d7 = Quick Nav Row Container (e-child)
 *   543450d0 = Quick Nav Card 1 (e-child)
 *   283fd992 = Quick Nav Card 2 (e-child)
 *   31210936 = Quick Nav Card 3 (e-child)
 *   5076405f = Angebot Section (e-parent)
 *   4ab7373a = Expertise Section (e-parent)
 *   42654494 = CTA Section (e-parent)
 *   5d20c9fb = Wave Transition (e-parent)
 *   2f1b6e13 = Impressionen Section (e-parent)
 *   1f1259b0 = Branchen Section (e-parent)
 *   47152a42 = Services Section (e-parent)
 *   9f58d4b  = About Section (e-parent)
 *   1ee70990 = Contact Section (e-parent)
 *   564b2e3e = Footer Wave (e-parent)
 */

/* ===================================
   CSS Variables
   =================================== */
:root {
    --brand-blue: #002d53;
    --brand-blue-700: #042443;
    --brand-yellow: #fdc300;
    --brand-red: #e30613;
    --text: #102132;
    --muted: #5c6b7a;
    --bg: #ffffff;
    --surface: #f6f8fb;
}

/* ===================================
   GLOBAL: Typography
   =================================== */
.elementor-page body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
}

/* =====================================================================
   SECTION 1: HERO
   Target: [data-id="72785fc5"]
   ===================================================================== */

/* Hero parent: fix overlay opacity and ensure proper positioning */
.elementor-2 .elementor-element.elementor-element-72785fc5 {
    --overlay-opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    min-height: 100vh !important;
    overflow: hidden !important;
}

/* Hero overlay gradient: 3-stop gradient matching original design */
.elementor-2 .elementor-element.elementor-element-72785fc5::before {
    background-color: transparent !important;
    background-image: linear-gradient(135deg,
        rgba(0, 45, 83, 0.85) 0%,
        rgba(0, 45, 83, 0.7) 50%,
        rgba(0, 85, 165, 0.6) 100%) !important;
    z-index: 1 !important;
}

/* Hero wave divider at bottom via ::after */
.elementor-2 .elementor-element.elementor-element-72785fc5::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: -1px !important;
    width: calc(100% + 2px) !important;
    height: 120px !important;
    z-index: 11 !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    transform: rotate(180deg) !important;
}

/* Hero content container: z-index above overlay, max ~50% width on desktop */
.elementor-2 .elementor-element.elementor-element-28153253 {
    position: relative !important;
    z-index: 10 !important;
    max-width: 50% !important;
}

/* ---- Hero Title 1: Yellow italic bold ---- */
.tecoil-hero-title-1 .elementor-heading-title {
    color: #fdc300 !important;
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
    line-height: 1.1 !important;
}

/* ---- Hero Title 2: White uppercase letter-spacing ---- */
.tecoil-hero-title-2 .elementor-heading-title {
    color: #ffffff !important;
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
}

/* ---- Hero Subtitle ---- */
.elementor-2 .elementor-element.elementor-element-28153253 .elementor-widget-text-editor .elementor-text-editor {
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    max-width: 700px;
}

/* ---- Oil Drop Icon: Un-hide + Position ---- */
.elementor-2 .elementor-element.elementor-element-2d1556f8 {
    display: flex !important;
    position: absolute !important;
    top: 20% !important;
    right: 60px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    width: 280px !important;
    max-width: 280px !important;
    pointer-events: none !important;
    animation: tecoil-float-oil 4s ease-in-out infinite !important;
}

/* Override elementor-hidden on oil drop */
.elementor-2 .elementor-element.elementor-element-2d1556f8.elementor-hidden {
    display: flex !important;
}

.elementor-2 .elementor-element.elementor-element-2d1556f8 img {
    width: 280px !important;
    height: auto !important;
    opacity: 0.8 !important;
    filter: drop-shadow(0 20px 50px rgba(253, 195, 0, 0.4)) !important;
}

@keyframes tecoil-float-oil {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

/* ---- CTA Box: Un-hide + Position ---- */
.elementor-2 .elementor-element.elementor-element-6db87a92 {
    display: flex !important;
    position: absolute !important;
    right: 5% !important;
    bottom: 200px !important;
    left: auto !important;
    top: auto !important;
    z-index: 20 !important;
    width: 260px !important;
    max-width: 260px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Override elementor-hidden on CTA (appears twice in DOM) */
.elementor-2 .elementor-element.elementor-element-6db87a92.elementor-hidden {
    display: flex !important;
}

/* CTA heading */
.elementor-2 .elementor-element.elementor-element-6db87a92 .elementor-heading-title {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
}

/* CTA text */
.elementor-2 .elementor-element.elementor-element-6db87a92 .elementor-text-editor {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px !important;
}

/* CTA SVG icon */
.elementor-2 .elementor-element.elementor-element-6db87a92 .elementor-widget-html {
    color: rgba(255, 255, 255, 0.9);
}

/* CTA button */
.elementor-2 .elementor-element.elementor-element-6db87a92 .elementor-button {
    background-color: #fdc300 !important;
    color: #002d53 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    width: 100% !important;
}

/* ---- Hero Responsive ---- */
@media (max-width: 1600px) {
    .elementor-2 .elementor-element.elementor-element-2d1556f8 {
        width: 250px !important;
        max-width: 250px !important;
        right: 30px !important;
    }
    .elementor-2 .elementor-element.elementor-element-2d1556f8 img {
        width: 250px !important;
    }
}
@media (max-width: 1400px) {
    .elementor-2 .elementor-element.elementor-element-2d1556f8 {
        width: 200px !important;
        max-width: 200px !important;
        right: 20px !important;
    }
    .elementor-2 .elementor-element.elementor-element-2d1556f8 img {
        width: 200px !important;
    }
}
@media (max-width: 1200px) {
    .elementor-2 .elementor-element.elementor-element-2d1556f8 {
        display: none !important;
    }
}
@media (max-width: 1024px) {
    .elementor-2 .elementor-element.elementor-element-6db87a92,
    .elementor-2 .elementor-element.elementor-element-6db87a92.elementor-hidden {
        display: none !important;
    }
}
@media (max-width: 1024px) {
    .elementor-2 .elementor-element.elementor-element-28153253 {
        max-width: 70% !important;
    }
}
@media (max-width: 768px) {
    .elementor-2 .elementor-element.elementor-element-72785fc5 {
        min-height: 80vh !important;
    }
    .elementor-2 .elementor-element.elementor-element-72785fc5::after {
        height: 60px !important;
    }
    .elementor-2 .elementor-element.elementor-element-28153253 {
        max-width: 100% !important;
    }
    .tecoil-hero-title-1 .elementor-heading-title {
        font-size: 26px !important;
    }
    .tecoil-hero-title-2 .elementor-heading-title {
        font-size: 20px !important;
        letter-spacing: 2px !important;
    }
}

/* =====================================================================
   SECTION 2: QUICK NAVIGATION
   Target: [data-id="5aa7328b"]
   ===================================================================== */

/* Quick-nav section: overlap hero, WHITE background */
.elementor-2 .elementor-element.elementor-element-5aa7328b {
    margin-top: -180px !important;
    position: relative !important;
    z-index: 100 !important;
    background-color: #ffffff !important;
}

/* Override Elementor's background settings */
.elementor-2 .elementor-element.elementor-element-5aa7328b:not(.elementor-motion-effects-element-type-background) {
    background-color: #ffffff !important;
}

/* Quick-nav cards: force 1/3 width each */
.elementor-2 .elementor-element.elementor-element-543450d0,
.elementor-2 .elementor-element.elementor-element-283fd992,
.elementor-2 .elementor-element.elementor-element-31210936 {
    width: calc(33.33% - 17px) !important;
    flex: 0 1 calc(33.33% - 17px) !important;
    min-width: 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}

/* Card hover effects */
.elementor-2 .elementor-element.elementor-element-543450d0:hover,
.elementor-2 .elementor-element.elementor-element-283fd992:hover,
.elementor-2 .elementor-element.elementor-element-31210936:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
    border-color: #fdc300 !important;
}

/* Card icon styling */
.elementor-2 .elementor-element.elementor-element-543450d0 .elementor-icon,
.elementor-2 .elementor-element.elementor-element-283fd992 .elementor-icon,
.elementor-2 .elementor-element.elementor-element-31210936 .elementor-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    margin-bottom: 15px !important;
}

/* Card 1 icon: solid yellow circle, dark navy icon */
.elementor-2 .elementor-element.elementor-element-543450d0 .elementor-icon {
    background: #fdc300 !important;
    color: #002d53 !important;
}

/* Card 2 icon: solid cyan/turquoise circle, white icon */
.elementor-2 .elementor-element.elementor-element-283fd992 .elementor-icon {
    background: #17a2b8 !important;
    color: #ffffff !important;
}

/* Card 3 icon: solid pink/red circle, white icon */
.elementor-2 .elementor-element.elementor-element-31210936 .elementor-icon {
    background: #e8485c !important;
    color: #ffffff !important;
}

/* Card headings */
.elementor-2 .elementor-element.elementor-element-543450d0 .elementor-heading-title,
.elementor-2 .elementor-element.elementor-element-283fd992 .elementor-heading-title,
.elementor-2 .elementor-element.elementor-element-31210936 .elementor-heading-title {
    color: #002d53 !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Card text */
.elementor-2 .elementor-element.elementor-element-543450d0 .elementor-text-editor,
.elementor-2 .elementor-element.elementor-element-283fd992 .elementor-text-editor,
.elementor-2 .elementor-element.elementor-element-31210936 .elementor-text-editor {
    color: #5c6b7a !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Quick-nav responsive */
@media (max-width: 992px) {
    .elementor-2 .elementor-element.elementor-element-5aa7328b {
        margin-top: -80px !important;
    }
}
@media (max-width: 768px) {
    .elementor-2 .elementor-element.elementor-element-5aa7328b {
        margin-top: -60px !important;
    }
    /* Stack cards on mobile */
    .elementor-2 .elementor-element.elementor-element-62a7b8d7 {
        --flex-direction: column !important;
        flex-direction: column !important;
    }
    .elementor-2 .elementor-element.elementor-element-543450d0,
    .elementor-2 .elementor-element.elementor-element-283fd992,
    .elementor-2 .elementor-element.elementor-element-31210936 {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: auto !important;
    }
}

/* =====================================================================
   SECTION 3: ANGEBOT (Dark blue section)
   Target: [data-id="5076405f"]
   ===================================================================== */
.elementor-2 .elementor-element.elementor-element-5076405f {
    position: relative;
    overflow: visible;
}

.elementor-2 .elementor-element.elementor-element-5076405f > .e-con-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.1;
    background-image: repeating-linear-gradient(45deg,
        transparent, transparent 35px,
        rgba(255, 255, 255, 0.05) 35px,
        rgba(255, 255, 255, 0.05) 70px);
    pointer-events: none;
}

/* Section title styling */
.elementor-2 .elementor-element.elementor-element-5076405f .elementor-heading-title {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
    font-style: italic !important;
}

/* Angebot subtitle */
.tecoil-angebot-subtitle .elementor-widget-text-editor {
    max-width: 800px;
    margin: 0 auto;
}

/* Angebot cards */
.tecoil-angebot-icon .elementor-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    font-size: 24px !important;
}

.tecoil-angebot-icon--yellow .elementor-icon {
    background: linear-gradient(135deg, #fdc300, #ffdb4d) !important;
    color: #002d53 !important;
}

.tecoil-angebot-icon--blue .elementor-icon {
    background: linear-gradient(135deg, #002d53, #0c3458) !important;
    color: #fdc300 !important;
}

.tecoil-angebot-icon--red .elementor-icon {
    background: linear-gradient(135deg, #e30613, #ff4757) !important;
    color: #ffffff !important;
}

/* Floating glow decoration */
.elementor-2 .elementor-element.elementor-element-5076405f::after {
    content: '';
    position: absolute;
    top: 10%; right: 5%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(253, 195, 0, 0.15) 0%, transparent 60%);
    border-radius: 50%;
    filter: blur(60px);
    animation: tecoil-float 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes tecoil-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-30px); }
}

/* =====================================================================
   SECTION 4: EXPERTISE
   Target: [data-id="4ab7373a"]
   ===================================================================== */
.elementor-2 .elementor-element.elementor-element-4ab7373a .elementor-heading-title {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
    font-style: italic !important;
}

.tecoil-expertise-image img {
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
    height: 420px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .tecoil-expertise-image img {
        height: 250px;
    }
}

/* =====================================================================
   SECTION 5: CTA
   Target: [data-id="42654494"]
   ===================================================================== */
.elementor-2 .elementor-element.elementor-element-42654494 {
    text-align: center;
}

.elementor-2 .elementor-element.elementor-element-42654494 .elementor-heading-title {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
    font-style: italic !important;
    color: #002d53 !important;
}

/* =====================================================================
   SECTION 6: WAVE TRANSITION
   Target: [data-id="5d20c9fb"]
   ===================================================================== */
.elementor-2 .elementor-element.elementor-element-5d20c9fb {
    margin-top: -1px;
    margin-bottom: -1px;
    line-height: 0;
}

/* =====================================================================
   SECTION 7: IMPRESSIONEN
   Target: [data-id="2f1b6e13"]
   ===================================================================== */
.elementor-2 .elementor-element.elementor-element-2f1b6e13 .elementor-heading-title {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
    font-style: italic !important;
    color: #002d53 !important;
}

/* =====================================================================
   SECTION 8: BRANCHEN
   Target: [data-id="1f1259b0"]
   ===================================================================== */
.elementor-2 .elementor-element.elementor-element-1f1259b0 .elementor-heading-title {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
    font-style: italic !important;
}

/* Industry cards - target by CSS class (works on widgets/inner containers) */
.tecoil-industry-card {
    flex: 0 0 calc(33.33% - 20px) !important;
    min-width: 280px !important;
    transition: all 0.3s ease;
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 2px solid #e9eef5 !important;
    padding: 30px !important;
}

.tecoil-industry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
    border-color: #fdc300 !important;
}

.tecoil-industry-card .elementor-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(253, 195, 0, 0.15) !important;
    color: #002d53 !important;
    font-size: 24px !important;
    margin-bottom: 15px !important;
}

.tecoil-industry-card .elementor-heading-title {
    color: #002d53 !important;
    font-weight: 700 !important;
    font-size: 20px !important;
}

.tecoil-industry-card .elementor-text-editor {
    color: #5c6b7a !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

@media (max-width: 768px) {
    .tecoil-industry-card {
        flex: 1 1 100% !important;
        min-width: auto !important;
    }
}

/* =====================================================================
   SECTION 9: SERVICES (Dark blue section)
   Target: [data-id="47152a42"]
   ===================================================================== */
.elementor-2 .elementor-element.elementor-element-47152a42 .elementor-heading-title {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
    font-style: italic !important;
}

/* =====================================================================
   SECTION 10: ABOUT
   Target: [data-id="9f58d4b"]
   ===================================================================== */
.elementor-2 .elementor-element.elementor-element-9f58d4b .elementor-heading-title {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
    font-style: italic !important;
}

.tecoil-about-image img {
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* =====================================================================
   SECTION 11: CONTACT (Dark blue section)
   Target: [data-id="1ee70990"]
   ===================================================================== */
.elementor-2 .elementor-element.elementor-element-1ee70990 .elementor-heading-title {
    font-family: "Arial Black", "Arial Bold", Arial, sans-serif !important;
    font-style: italic !important;
}

.tecoil-contact-form .elementor-field-group input,
.tecoil-contact-form .elementor-field-group textarea {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #ffffff;
    padding: 12px 14px;
}

.tecoil-contact-form .elementor-field-group input:focus,
.tecoil-contact-form .elementor-field-group textarea:focus {
    border-color: #fdc300;
    box-shadow: 0 0 0 4px rgba(253, 195, 0, 0.15);
}

.tecoil-contact-form .elementor-field-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.tecoil-contact-form .elementor-button {
    background: #fdc300 !important;
    color: #002d53 !important;
    font-weight: 700;
    border-radius: 10px;
    padding: 14px 30px;
    width: 100%;
}

/* =====================================================================
   SECTION 12: FOOTER WAVE
   Target: [data-id="564b2e3e"]
   ===================================================================== */
.elementor-2 .elementor-element.elementor-element-564b2e3e {
    background: #002d53 !important;
}

.tecoil-footer-wave-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}