/**
 * Baier Elektrotechnik - Harmonisches Dunkles Design
 * Einheitliches Design für Header, Content und Footer
 */

/* ============================================
   Design System - Farben & Variablen
============================================ */
:root {
    /* Hauptfarben */
    --baier-orange: #f47629;
    --baier-orange-light: #ff9a56;
    --baier-orange-dark: #d65a10;

    /* Dunkle Hintergründe */
    --baier-bg-dark: #0a0c10;
    --baier-bg-darker: #060709;
    --baier-bg-card: #0f1115;
    --baier-bg-card-hover: #14171d;

    /* Borders & Linien */
    --baier-border: #1a1d24;
    --baier-border-light: rgba(244, 118, 41, 0.2);

    /* Text */
    --baier-text: #e8eaed;
    --baier-text-muted: #9aa0a9;
    --baier-white: #ffffff;

    /* Effekte */
    --baier-glow: 0 0 30px rgba(244, 118, 41, 0.25);
    --baier-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* ============================================
   DUNKLE BASIS NUR AUF STARTSEITE
============================================ */
body.home {
    background: var(--baier-bg-darker) !important;
}

body.home #tt-pageContent,
body.home #pageContent {
    background: var(--baier-bg-darker) !important;
    padding-top: 0 !important;
}

/* ============================================
   HEADER - KOMPLETT DUNKEL
============================================ */

/* Alle Header-Elemente dunkel */
.page-header,
#tt-header,
header,
header.page-header,
header#tt-header,
body .page-header,
body #tt-header,
body.home .page-header,
body.home #tt-header,
html body .page-header,
html body #tt-header {
    background: var(--baier-bg-darker) !important;
    background-color: var(--baier-bg-darker) !important;
    border-bottom: 1px solid var(--baier-border-light) !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* Header Styles bleiben normal - keine Komprimierung */

/* Innere Header-Elemente transparent */
.page-header *,
#tt-header *,
.page-header .header-top,
.page-header .navbar,
.page-header .navbar-header,
.page-header .container,
.page-header .row,
.page-header .col-sm-4,
.page-header .col-sm-8,
#tt-header .holder-top,
#tt-header .h-topbox,
#tt-header .tt-header-holder,
#tt-header .container,
#tt-header .row {
    background: transparent !important;
    background-color: transparent !important;
}

/* Header Text weiß */
.page-header,
.page-header *,
#tt-header,
#tt-header * {
    color: var(--baier-text) !important;
}

/* Navigation - Flex-Ausrichtung für gleiche Höhe aller Items */
#tt-nav > ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

#tt-nav > ul > li {
    display: flex !important;
    align-items: center !important;
}

#tt-nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
}

/* Navigation Links */
.page-header .nav > li > a,
.page-header .navbar-nav > li > a,
#tt-header .tt-desctop-menu nav > ul > li > a,
#tt-header nav ul li a {
    color: var(--baier-white) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
    transition: color 0.3s ease !important;
    position: relative !important;
}

.page-header .nav > li > a:hover,
.page-header .navbar-nav > li > a:hover,
#tt-header .tt-desctop-menu nav > ul > li > a:hover,
#tt-header nav ul li a:hover {
    color: var(--baier-orange) !important;
}

/* Aktiver Menüpunkt */
#tt-nav > ul > li.current_page_item > a,
#tt-nav > ul > li.current-menu-item > a,
#tt-nav > ul > li.current-menu-ancestor > a,
.page-header .nav > li.active > a,
.page-header .navbar-nav > li.active > a {
    color: var(--baier-orange) !important;
}

/* Aktiver Menüpunkt Unterstrich */
#tt-nav > ul > li.current_page_item > a::after,
#tt-nav > ul > li.current-menu-item > a::after,
#tt-nav > ul > li.current-menu-ancestor > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 15px !important;
    right: 15px !important;
    height: 2px !important;
    background: var(--baier-orange) !important;
    border-radius: 1px !important;
}

/* Header Buttons */
.page-header .btn,
.page-header a.btn,
#tt-header .tt-btn,
#tt-header a.tt-btn {
    background: linear-gradient(135deg, var(--baier-orange) 0%, var(--baier-orange-light) 100%) !important;
    border: none !important;
    color: var(--baier-white) !important;
    border-radius: 6px !important;
    box-shadow: var(--baier-glow) !important;
}

.page-header .btn:hover,
#tt-header .tt-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 40px rgba(244, 118, 41, 0.4) !important;
}

/* Header Icons */
.page-header .icon,
.page-header [class^="icon-"],
.page-header [class*=" icon-"],
#tt-header .icon,
#tt-header [class^="icon-"],
#tt-header [class*=" icon-"] {
    color: var(--baier-orange) !important;
}

/* ============================================
   DROPDOWN MENÜS - REDESIGN
   ============================================ */
.page-header .dropdown-menu,
#tt-header .tt-dropdown-menu,
.navbar .dropdown-menu,
#tt-nav > ul > li ul {
    background: #0d0f13 !important;
    border: 1px solid rgba(244, 118, 41, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.03) !important;
    padding: 8px !important;
    min-width: 220px !important;
    width: auto !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Dropdown Links */
.page-header .dropdown-menu a,
#tt-header .tt-dropdown-menu a,
.navbar .dropdown-menu a,
#tt-nav > ul > li ul li a {
    color: var(--baier-text-muted) !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    display: block !important;
    transition: all 0.2s ease !important;
    margin: 2px 0 !important;
    border-bottom: none !important;
}

/* Dropdown Links Hover */
.page-header .dropdown-menu a:hover,
#tt-header .tt-dropdown-menu a:hover,
.navbar .dropdown-menu a:hover,
#tt-nav > ul > li ul li a:hover {
    background: rgba(244, 118, 41, 0.1) !important;
    color: var(--baier-white) !important;
    padding-left: 20px !important;
}

/* Dropdown Trennlinie zwischen Items */
.page-header .dropdown-menu li + li,
#tt-nav > ul > li ul li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Dropdown Caret/Arrow */
#tt-nav > ul > li > a .ecaret,
.page-header .dropdown-toggle .ecaret,
.navbar .dropdown-toggle .ecaret {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    border-top: 4px solid currentColor !important;
    border-right: 4px solid transparent !important;
    border-left: 4px solid transparent !important;
    opacity: 0.5 !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

#tt-nav > ul > li:hover > a .ecaret,
.page-header .dropdown:hover > a .ecaret {
    opacity: 1 !important;
    transform: rotate(180deg) !important;
}

/* Submenu (verschachtelt) */
#tt-nav > ul > li ul ul,
.page-header .dropdown-menu .dropdown-menu {
    top: -8px !important;
    border-radius: 12px !important;
}

/* Submenu Caret für Items mit Untermenü */
#tt-nav > ul > li ul li.dropdown-submenu > a .ecaret {
    border-top: 4px solid transparent !important;
    border-bottom: 4px solid transparent !important;
    border-left: 4px solid currentColor !important;
    border-right: none !important;
    float: right !important;
    margin-top: 8px !important;
}

/* ============================================
   WARENKORB DROPDOWN - KOMPLETT DUNKEL
============================================ */

/* Maximale Spezifität für Warenkorb-Dropdown */
html body .header-cart-dropdown,
html body .page-header .header-cart-dropdown,
html body .header-cart .header-cart-dropdown,
html body .tt-obj__dropdown,
html body .tt-obj__dropdown.header-cart-dropdown,
html body #tt-header .tt-obj__dropdown,
html body #tt-header .header-cart-dropdown,
html body .tt-header-holder .tt-obj__dropdown,
html body .tt-desktop-header .tt-obj__dropdown,
html body .js-dropdown-cart .tt-obj__dropdown,
html body div.tt-obj__dropdown,
html body div.header-cart-dropdown,
.tt-obj.tt-obj_cart .tt-obj__dropdown,
#tt-header .tt-obj.tt-obj_cart .tt-obj__dropdown {
    background: #0f1115 !important;
    background-color: #0f1115 !important;
    border: 1px solid #1a1d24 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7) !important;
    padding: 20px !important;
    min-width: 320px !important;
}

/* Fallback: Alle Dropdowns im Header dunkel */
#tt-header [class*="dropdown"],
.tt-header-holder [class*="dropdown"],
header [class*="cart"] [class*="dropdown"] {
    background: #0f1115 !important;
    background-color: #0f1115 !important;
}

/* Demo 2 spezifische Dropdown Styles */
.tt-obj__dropdown-close {
    color: #9aa0a9 !important;
    cursor: pointer !important;
}

.tt-obj__dropdown-close:hover {
    color: #f47629 !important;
}

.tt-obj__dropdown .tt-obj__title,
.header-cart-dropdown .tt-obj__title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #1a1d24 !important;
}

/* Demo 1: prd-sm Container */
.header-cart-dropdown .prd-sm,
.prd-sm {
    background: transparent !important;
}

/* Demo 1: Einzelne Produkte */
.header-cart-dropdown .prd-sm-item,
.prd-sm-item {
    background: #14171d !important;
    border: 1px solid #1a1d24 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Demo 1: Produktbild */
.header-cart-dropdown .prd-sm-img,
.prd-sm-img {
    background: #0a0c10 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.header-cart-dropdown .prd-sm-img img,
.prd-sm-img img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
}

/* Demo 1: Produktinfo */
.header-cart-dropdown .prd-sm-info,
.prd-sm-info {
    flex: 1 !important;
}

.header-cart-dropdown .prd-sm-info h3,
.prd-sm-info h3,
.header-cart-dropdown .prd-sm-info h3 a,
.prd-sm-info h3 a {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 0 5px 0 !important;
    text-decoration: none !important;
}

.header-cart-dropdown .prd-sm-info h3 a:hover,
.prd-sm-info h3 a:hover {
    color: #f47629 !important;
}

/* Demo 1: Preis */
.header-cart-dropdown .prd-sm-info .price,
.prd-sm-info .price,
.header-cart-dropdown .price,
.header-cart-dropdown .amount,
.prd-sm .amount {
    color: #f47629 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Demo 1: Löschen Button */
.header-cart-dropdown .prd-sm-delete,
.prd-sm-delete {
    color: #9aa0a9 !important;
    cursor: pointer !important;
    padding: 5px !important;
    transition: color 0.3s ease !important;
}

.header-cart-dropdown .prd-sm-delete:hover,
.prd-sm-delete:hover {
    color: #ef4444 !important;
}

/* Demo 2: tt-cart-list Container */
.header-cart-dropdown .tt-cart-list,
.tt-cart-list {
    background: transparent !important;
}

/* Demo 2: Einzelne Items */
.header-cart-dropdown .tt-item,
.tt-item {
    background: #14171d !important;
    border: 1px solid #1a1d24 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
}

.header-cart-dropdown .tt-item__title,
.tt-item__title,
.header-cart-dropdown .tt-item__title a,
.tt-item__title a {
    color: #ffffff !important;
    font-weight: 500 !important;
}

.header-cart-dropdown .tt-item__price,
.tt-item__price {
    color: #f47629 !important;
    font-weight: 600 !important;
}

/* Summe / Total */
.header-cart-dropdown .total,
.header-cart-dropdown p.total,
.header-cart-dropdown .woocommerce-mini-cart__total,
.tt-cart-total {
    background: #14171d !important;
    border: 1px solid #1a1d24 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-top: 15px !important;
    color: #ffffff !important;
}

.header-cart-dropdown .total strong,
.header-cart-dropdown p.total strong {
    color: #ffffff !important;
}

.header-cart-dropdown .total .amount,
.header-cart-dropdown p.total .amount {
    color: #f47629 !important;
    font-size: 16px !important;
}

/* Buttons Container */
.header-cart-dropdown .buttons,
.header-cart-dropdown p.buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

/* View Cart / Warenkorb Button */
.header-cart-dropdown .button,
.header-cart-dropdown a.button,
.header-cart-dropdown .buttons a,
.header-cart-dropdown .wc-forward {
    background: linear-gradient(135deg, #f47629 0%, #ff9a56 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

.header-cart-dropdown .button:hover,
.header-cart-dropdown a.button:hover,
.header-cart-dropdown .buttons a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 20px rgba(244, 118, 41, 0.4) !important;
}

/* Checkout Button - anders gestylt */
.header-cart-dropdown .checkout,
.header-cart-dropdown a.checkout {
    background: #060709 !important;
    border: 1px solid #f47629 !important;
    color: #f47629 !important;
}

.header-cart-dropdown .checkout:hover,
.header-cart-dropdown a.checkout:hover {
    background: #f47629 !important;
    color: #ffffff !important;
}

/* Leerer Warenkorb */
.header-cart-dropdown .empty,
.header-cart-dropdown li.empty,
.tt-obj__dropdown .empty,
.tt-obj__dropdown li.empty,
.tt-cart-list .empty,
.tt-cart-list li.empty {
    color: #9aa0a9 !important;
    text-align: center !important;
    padding: 30px 20px !important;
    font-size: 14px !important;
    list-style: none !important;
    background: transparent !important;
}

/* Alle Texte in Demo 2 Dropdown */
.tt-obj__dropdown,
.tt-obj__dropdown *,
.header-cart-dropdown,
.header-cart-dropdown * {
    color: #e8eaed !important;
}

.tt-obj__dropdown a,
.header-cart-dropdown a {
    color: #ffffff !important;
}

.tt-obj__dropdown a:hover,
.header-cart-dropdown a:hover {
    color: #f47629 !important;
}

/* Demo 2 Cart Buttons */
.tt-obj__dropdown .wc-forward,
.tt-obj__dropdown .button,
.tt-obj__dropdown a.button,
.tt-cart-total .wc-forward,
.tt-cart-total .button {
    background: linear-gradient(135deg, #f47629 0%, #ff9a56 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: block !important;
    margin-top: 10px !important;
}

.tt-obj__dropdown .wc-forward:hover,
.tt-obj__dropdown .button:hover {
    box-shadow: 0 0 20px rgba(244, 118, 41, 0.4) !important;
}

.tt-obj__dropdown .checkout.wc-forward,
.tt-cart-total .checkout {
    background: #060709 !important;
    border: 1px solid #f47629 !important;
    color: #f47629 !important;
}

.tt-obj__dropdown .checkout.wc-forward:hover {
    background: #f47629 !important;
    color: #ffffff !important;
}

/* Alle Texte im Dropdown */
.header-cart-dropdown,
.header-cart-dropdown * {
    color: #e8eaed !important;
}

/* Links im Dropdown */
.header-cart-dropdown a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.header-cart-dropdown a:hover {
    color: #f47629 !important;
}

/* Close Button Demo 2 */
.header-cart-dropdown .tt-obj__dropdown-close {
    color: #9aa0a9 !important;
    cursor: pointer !important;
}

.header-cart-dropdown .tt-obj__dropdown-close:hover {
    color: #f47629 !important;
}

/* Title Demo 2 */
.header-cart-dropdown .tt-obj__title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #1a1d24 !important;
}

/* ============================================
   MOBILE MENÜ - REDESIGN
   ============================================ */
#slidemenu,
#mobile-menu,
.panel-menu {
    background: #0a0c10 !important;
    border-right: 1px solid rgba(244, 118, 41, 0.1) !important;
    padding-top: 20px !important;
}

/* Mobile Menü - Close Button mehr Abstand nach unten */
.panel-menu li.mm-close-parent {
    margin-bottom: 20px !important;
}

.panel-menu li.mm-close-parent .mm-close {
    border-bottom: 1px solid rgba(244, 118, 41, 0.15) !important;
    color: var(--baier-text) !important;
    padding: 14px 20px 15px 20px !important;
}

/* Mobile Menü - Erste Menüpunkte mit mehr Abstand zum Top */
.panel-menu .mmpanels,
.panel-menu .mmpanels > .mmpanel {
    padding-top: 15px !important;
}

#slidemenu .nav > li > a,
#mobile-menu ul li a,
.panel-menu ul li a {
    color: var(--baier-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
}

#slidemenu .nav > li > a:hover,
#mobile-menu ul li a:hover,
.panel-menu ul li a:hover {
    color: var(--baier-orange) !important;
    background: rgba(244, 118, 41, 0.08) !important;
    padding-left: 24px !important;
}

/* Mobile Untermenü-Items eingerückt */
#mobile-menu ul ul li a,
.panel-menu ul ul li a {
    padding-left: 32px !important;
    font-size: 14px !important;
    color: var(--baier-text-muted) !important;
}

#mobile-menu ul ul li a:hover,
.panel-menu ul ul li a:hover {
    padding-left: 36px !important;
    color: var(--baier-orange) !important;
}

/* Mobile aktiver Menüpunkt */
#mobile-menu ul li.current-menu-item > a,
.panel-menu ul li.current-menu-item > a {
    color: var(--baier-orange) !important;
    border-left: 3px solid var(--baier-orange) !important;
    background: rgba(244, 118, 41, 0.05) !important;
}

.navbar-toggle,
.page-header .navbar-toggle {
    border-color: var(--baier-border) !important;
    color: var(--baier-white) !important;
}

.navbar-toggle .icon-bar {
    background: var(--baier-white) !important;
}

/* Header Info Mobile */
.header-info-mobile,
.page-header .header-info-mobile {
    background: var(--baier-bg-card) !important;
}

.header-info-toggle {
    background: var(--baier-orange) !important;
    color: var(--baier-white) !important;
}

/* Social Links im Header */
.page-header .social-links a,
#tt-header .social-links a {
    color: var(--baier-text-muted) !important;
}

.page-header .social-links a:hover,
#tt-header .social-links a:hover {
    color: var(--baier-orange) !important;
}

/* ============================================
   KONTAKTSEITE - MAP & FORMULAR MOBILE
============================================ */

/* Google Maps responsive */
.mapouter,
.gmap_canvas {
    max-width: 100% !important;
    overflow: hidden !important;
}

.mapouter iframe,
.gmap_canvas iframe,
iframe.map-contact,
#gmap_canvas {
    max-width: 100% !important;
    width: 100% !important;
    height: 350px;
    border: none;
    border-radius: 12px;
}

/* Emergency Form - Mobile Responsive */
@media (max-width: 767px) {
    .emergency-form {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .emergency-form .field {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .emergency-form .field.btn {
        flex: 1 1 100% !important;
    }

    .emergency-form .wpcf7-form-control:not(.wpcf7-submit) {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    .emergency-form .wpcf7-submit {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Maps auf Smartphones */
    .mapouter iframe,
    .gmap_canvas iframe,
    iframe.map-contact,
    #gmap_canvas {
        height: 250px !important;
        border-radius: 10px !important;
    }

    /* Elementor Sections - overflow verhindern */
    .elementor-section,
    .elementor-column-wrap,
    .elementor-widget-wrap,
    .elementor-widget-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Alle Formulare auf Kontaktseite */
    .wpcf7 {
        max-width: 100% !important;
    }

    .wpcf7 input:not([type="submit"]),
    .wpcf7 textarea,
    .wpcf7 select {
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    .wpcf7 input[type="submit"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .mapouter iframe,
    .gmap_canvas iframe,
    iframe.map-contact,
    #gmap_canvas {
        height: 200px !important;
    }

    .emergency-form .wpcf7-form-control:not(.wpcf7-submit) {
        padding: 10px 12px !important;
    }
}

/* ============================================
   HERO SECTION
============================================ */
.baier-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #060709;
    overflow: hidden;
    padding: 80px 0 60px;
}

/* Linke Seite - Industriell/Robotik mit Metallgitter */
.baier-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(6, 7, 9, 0.7) 0%, rgba(15, 17, 21, 0.85) 100%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 50px,
            rgba(244, 118, 41, 0.08) 50px,
            rgba(244, 118, 41, 0.08) 51px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 50px,
            rgba(244, 118, 41, 0.08) 50px,
            rgba(244, 118, 41, 0.08) 51px
        );
    pointer-events: none;
    z-index: 0;
}

/* Rechte Seite - Elektrisch mit Schaltkreis-Linien */
.baier-hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background:
        linear-gradient(225deg, rgba(6, 7, 9, 0.7) 0%, rgba(15, 17, 21, 0.85) 100%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 30px,
            rgba(244, 118, 41, 0.05) 30px,
            rgba(244, 118, 41, 0.05) 31px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 30px,
            rgba(244, 118, 41, 0.05) 30px,
            rgba(244, 118, 41, 0.05) 31px
        );
    pointer-events: none;
    z-index: 0;
}

.baier-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 0%, var(--baier-bg-darker) 75%);
    pointer-events: none;
    z-index: 1;
}

.baier-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(244, 118, 41, 0.15) 0%, transparent 60%);
    pointer-events: none;
    animation: pulse 4s ease-in-out infinite;
    z-index: 1;
}

/* Industrielle Linien links */
.baier-hero-industrial-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.baier-hero-industrial-left::before {
    content: '';
    position: absolute;
    top: 40%;
    left: -10%;
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(244, 118, 41, 0.3), transparent);
    transform: rotate(-8deg);
}

.baier-hero-industrial-left::after {
    content: '';
    position: absolute;
    top: 55%;
    left: -10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244, 118, 41, 0.2), transparent);
    transform: rotate(-5deg);
}

/* Elektrische Linien rechts */
.baier-hero-electric-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.baier-hero-electric-right::before {
    content: '';
    position: absolute;
    top: 42%;
    right: -10%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, rgba(244, 118, 41, 0.25), transparent);
    transform: rotate(6deg);
}

.baier-hero-electric-right::after {
    content: '';
    position: absolute;
    top: 58%;
    right: -5%;
    width: 70%;
    height: 1px;
    background: linear-gradient(270deg, transparent, rgba(244, 118, 41, 0.15), transparent);
    transform: rotate(4deg);
}

/* Schaltkreis-Muster */
.baier-hero-circuit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}

.baier-circuit-node {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(244, 118, 41, 0.3);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(244, 118, 41, 0.2);
}

.baier-circuit-node:nth-child(1) { top: 25%; left: 10%; }
.baier-circuit-node:nth-child(2) { top: 40%; left: 20%; animation: blink 3s infinite; }
.baier-circuit-node:nth-child(3) { top: 55%; left: 8%; }
.baier-circuit-node:nth-child(4) { top: 70%; left: 15%; animation: blink 2.5s infinite 0.5s; }
.baier-circuit-node:nth-child(5) { top: 30%; right: 12%; animation: blink 4s infinite 1s; }
.baier-circuit-node:nth-child(6) { top: 48%; right: 8%; }
.baier-circuit-node:nth-child(7) { top: 60%; right: 18%; animation: blink 3.5s infinite 0.8s; }
.baier-circuit-node:nth-child(8) { top: 75%; right: 10%; }

@keyframes blink {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); box-shadow: 0 0 20px rgba(244, 118, 41, 0.5); }
}

/* Hero Icons */
.baier-hero-icon {
    position: absolute;
    color: var(--baier-orange);
    z-index: 1;
    animation: float 6s ease-in-out infinite;
}

.baier-hero-icon-left-1 {
    top: 35%;
    left: 8%;
    animation-delay: 0s;
}

.baier-hero-icon-left-2 {
    top: 60%;
    left: 12%;
    animation-delay: 1.5s;
}

.baier-hero-icon-right-1 {
    top: 38%;
    right: 10%;
    animation-delay: 0.8s;
}

.baier-hero-icon-right-2 {
    top: 62%;
    right: 8%;
    animation-delay: 2s;
}

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

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

.baier-hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(244, 118, 41, 0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.1), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(244, 118, 41, 0.2), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(255, 255, 255, 0.1), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(244, 118, 41, 0.2), transparent);
    background-size: 200px 200px;
    animation: particles 20s linear infinite;
    pointer-events: none;
}

@keyframes particles {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200px); }
}

.baier-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.baier-hero-badge {
    display: inline-block;
    background: rgba(244, 118, 41, 0.15);
    border: 1px solid rgba(244, 118, 41, 0.3);
    color: var(--baier-orange);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    animation: fadeInDown 1s ease;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.baier-hero-title {
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s ease 0.1s backwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.baier-hero-title .baier-brand {
    display: block;
    font-size: 5rem;
    font-weight: 800;
    color: var(--baier-orange);
    text-shadow: 0 0 60px rgba(244, 118, 41, 0.5);
    line-height: 1;
}

.baier-hero-title .baier-title-line {
    display: block;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--baier-white);
    letter-spacing: 10px;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.baier-hero-subtitle {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--baier-text-muted);
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s ease 0.2s backwards;
}

.baier-hero-services {
    font-size: 0.9rem;
    color: var(--baier-text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    animation: fadeInUp 1s ease 0.3s backwards;
}

.baier-hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.4s backwards;
}

.baier-hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.baier-hero-scroll a {
    color: var(--baier-text-muted);
    transition: color 0.3s ease;
}

.baier-hero-scroll a:hover {
    color: var(--baier-orange);
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* ============================================
   BUTTONS
============================================ */
.baier-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.baier-btn-primary {
    background: linear-gradient(135deg, var(--baier-orange) 0%, var(--baier-orange-light) 100%);
    color: var(--baier-white);
}

.baier-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(244, 118, 41, 0.4);
    color: var(--baier-white);
}

.baier-btn-glow {
    box-shadow: var(--baier-glow);
}

.baier-btn-glass {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--baier-white);
    backdrop-filter: blur(10px);
}

.baier-btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--baier-white);
}

.baier-btn-white {
    background: var(--baier-white);
    color: var(--baier-bg-darker);
}

.baier-btn-white:hover {
    background: var(--baier-text);
    transform: translateY(-3px);
    color: var(--baier-bg-darker);
}

.baier-btn-block {
    width: 100%;
    justify-content: center;
}

/* ============================================
   SECTIONS ALLGEMEIN
============================================ */
.baier-services,
.baier-about,
.baier-stats,
.baier-why-us,
.baier-contact,
.baier-cta {
    padding: 80px 0;
    position: relative;
    background: var(--baier-bg-darker);
}

/* Services Section spezifisch - weniger Padding oben für bessere Zentrierung */
.baier-services {
    padding-top: 60px;
    padding-bottom: 80px;
}

.baier-section-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, var(--baier-bg-dark) 0%, var(--baier-bg-darker) 100%);
    pointer-events: none;
}

.baier-section-header {
    text-align: center;
    margin-bottom: 50px;
}

/* Services Header spezifisch - weniger Abstand */
.baier-services .baier-section-header {
    margin-bottom: 40px;
}

.baier-section-tag {
    display: inline-block;
    background: rgba(244, 118, 41, 0.1);
    border: 1px solid rgba(244, 118, 41, 0.2);
    color: var(--baier-orange);
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.baier-section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--baier-white);
    margin-bottom: 1rem;
}

.baier-highlight {
    color: var(--baier-orange);
}

.baier-section-subtitle {
    font-size: 1.1rem;
    color: var(--baier-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   SERVICE CARDS
============================================ */
.baier-service-card {
    background: var(--baier-bg-card);
    border: 1px solid var(--baier-border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    margin-bottom: 30px;
}

.baier-service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(244, 118, 41, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.baier-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--baier-orange), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.baier-service-card:hover .baier-card-glow {
    opacity: 1;
}

.baier-service-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
}

.baier-service-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--baier-orange);
}

.baier-service-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--baier-white);
    margin-bottom: 1rem;
}

.baier-service-card p {
    color: var(--baier-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.baier-service-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.baier-service-list li {
    color: var(--baier-text);
    font-size: 0.9rem;
    padding: 0.4rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.baier-service-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--baier-orange);
}

.baier-service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--baier-orange);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.baier-service-link:hover {
    gap: 0.8rem;
    color: var(--baier-orange-light);
}

/* ============================================
   ABOUT SECTION
============================================ */
.baier-about {
    background: var(--baier-bg-dark);
}

.baier-about-image {
    position: relative;
    padding: 20px;
}

.baier-about-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--baier-shadow);
}

.baier-about-image-placeholder {
    background: var(--baier-bg-card);
    border: 2px dashed var(--baier-border);
    border-radius: 16px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--baier-text-muted);
    text-align: center;
}

.baier-about-badge {
    position: absolute;
    right: 0;
    bottom: 40px;
    background: linear-gradient(135deg, var(--baier-orange) 0%, var(--baier-orange-dark) 100%);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--baier-glow);
}

.baier-badge-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--baier-white);
    line-height: 1;
}

.baier-badge-text {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.3rem;
}

.baier-about-float-card {
    position: absolute;
    left: 0;
    top: 40px;
    background: var(--baier-bg-card);
    border: 1px solid var(--baier-border);
    padding: 1rem 1.5rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--baier-white);
    font-weight: 500;
    box-shadow: var(--baier-shadow);
}

.baier-about-float-card svg {
    color: var(--baier-orange);
}

.baier-about-content {
    padding-left: 40px;
}

.baier-about-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--baier-white);
    margin-bottom: 1.5rem;
}

.baier-about-lead {
    font-size: 1.15rem;
    color: var(--baier-text);
    margin-bottom: 1rem;
}

.baier-about-content p {
    color: var(--baier-text-muted);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.baier-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.baier-feature {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--baier-text);
    font-weight: 500;
}

.baier-feature-icon {
    width: 32px;
    height: 32px;
    background: rgba(244, 118, 41, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--baier-orange);
}

/* ============================================
   STATS SECTION
============================================ */
.baier-stats {
    background: var(--baier-bg-darker);
    position: relative;
    overflow: hidden;
}

.baier-stats-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(244, 118, 41, 0.05) 0%, transparent 50%, rgba(244, 118, 41, 0.05) 100%);
    pointer-events: none;
}

.baier-stat {
    text-align: center;
    padding: 2rem;
}

.baier-stat-icon {
    color: var(--baier-orange);
    margin-bottom: 1rem;
}

.baier-stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--baier-white);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.baier-stat-label {
    color: var(--baier-text-muted);
    font-size: 0.95rem;
}

/* ============================================
   WHY US SECTION
============================================ */
.baier-why-us {
    background: var(--baier-bg-dark);
}

.baier-why-card {
    background: var(--baier-bg-card);
    border: 1px solid var(--baier-border);
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    height: 100%;
    transition: all 0.4s ease;
    margin-bottom: 30px;
}

.baier-why-card:hover {
    transform: translateY(-5px);
    border-color: rgba(244, 118, 41, 0.3);
}

.baier-why-icon {
    width: 80px;
    height: 80px;
    background: rgba(244, 118, 41, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--baier-orange);
}

.baier-why-card h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--baier-white);
    margin-bottom: 1rem;
}

.baier-why-card p {
    color: var(--baier-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ============================================
   CONTACT SECTION
============================================ */
.baier-contact {
    background: var(--baier-bg-darker);
}

.baier-contact-info h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--baier-white);
    margin-bottom: 1.5rem;
}

.baier-contact-info > p {
    color: var(--baier-text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.baier-contact-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.baier-contact-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.baier-contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(244, 118, 41, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--baier-orange);
    flex-shrink: 0;
}

.baier-contact-text strong {
    display: block;
    color: var(--baier-white);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.baier-contact-text p {
    color: var(--baier-text-muted);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.baier-contact-text a {
    color: var(--baier-orange);
    text-decoration: none;
}

.baier-contact-text a:hover {
    text-decoration: underline;
}

/* Contact Form */
.baier-contact-form-wrapper {
    background: var(--baier-bg-card);
    border: 1px solid var(--baier-border);
    border-radius: 20px;
    padding: 3rem;
}

.baier-contact-form-wrapper h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--baier-white);
    margin-bottom: 2rem;
}

.baier-form-group {
    margin-bottom: 1.5rem;
}

.baier-form-group input,
.baier-form-group select,
.baier-form-group textarea {
    width: 100%;
    background: var(--baier-bg-darker);
    border: 1px solid var(--baier-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    color: var(--baier-white);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.baier-form-group input:focus,
.baier-form-group select:focus,
.baier-form-group textarea:focus {
    outline: none;
    border-color: var(--baier-orange);
    box-shadow: 0 0 0 3px rgba(244, 118, 41, 0.1);
}

.baier-form-group input::placeholder,
.baier-form-group textarea::placeholder {
    color: var(--baier-text-muted);
}

.baier-form-group select {
    cursor: pointer;
}

.baier-form-group select option {
    background: var(--baier-bg-card);
    color: var(--baier-white);
}

/* Alert Messages */
.baier-alert {
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
}

.baier-alert-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.baier-alert-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* ============================================
   CTA SECTION
============================================ */
.baier-cta {
    background: linear-gradient(135deg, var(--baier-bg-dark) 0%, var(--baier-bg-darker) 100%);
    position: relative;
    overflow: hidden;
}

.baier-cta-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(244, 118, 41, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.baier-cta-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.baier-cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--baier-white);
    margin-bottom: 1rem;
}

.baier-cta-content > p {
    font-size: 1.1rem;
    color: var(--baier-text-muted);
    margin-bottom: 2rem;
}

.baier-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   BAIER CUSTOM FOOTER - Modern Design
============================================ */
.baier-footer {
    background: var(--baier-bg-darker) !important;
    padding: 60px 0 0 !important;
    border-top: 1px solid var(--baier-border-light) !important;
}

.baier-footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
}

.baier-footer-brand h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--baier-orange);
    margin-bottom: 1rem;
}

.baier-footer-brand p {
    color: var(--baier-text-muted);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.baier-footer-social {
    display: flex;
    gap: 10px;
}

.baier-footer-social a {
    width: 40px;
    height: 40px;
    background: var(--baier-bg-card);
    border: 1px solid var(--baier-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--baier-text);
    transition: all 0.3s ease;
}

.baier-footer-social a:hover {
    background: var(--baier-orange);
    border-color: var(--baier-orange);
    color: var(--baier-white);
    transform: translateY(-3px);
}

.baier-footer-col h4 {
    color: var(--baier-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    position: relative;
}

.baier-footer-col h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--baier-orange);
}

.baier-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.baier-footer-links li {
    padding: 8px 0;
    border: none !important;
}

.baier-footer-links li::before {
    display: none !important;
}

.baier-footer-links a {
    color: var(--baier-text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.baier-footer-links a::before {
    content: '→';
    color: var(--baier-orange);
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.baier-footer-links a:hover {
    color: var(--baier-orange);
    padding-left: 5px;
}

.baier-footer-contact-item {
    display: flex;
    gap: 12px;
    margin-bottom: 1rem;
    align-items: flex-start;
}

.baier-footer-contact-item svg {
    color: var(--baier-orange);
    flex-shrink: 0;
    margin-top: 2px;
}

.baier-footer-contact-item span {
    color: var(--baier-text-muted);
    line-height: 1.6;
}

.baier-footer-contact-item a {
    color: var(--baier-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.baier-footer-contact-item a:hover {
    color: var(--baier-orange);
}

.baier-footer-bottom {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px 0;
    border-top: 1px solid var(--baier-border);
}

.baier-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.baier-copyright {
    color: var(--baier-text-muted);
    font-size: 0.9rem;
}

.baier-copyright a {
    color: var(--baier-orange);
    text-decoration: none;
}

.baier-footer-bottom-links {
    display: flex;
    gap: 20px;
}

.baier-footer-bottom-links a {
    color: var(--baier-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.baier-footer-bottom-links a:hover {
    color: var(--baier-orange);
}

/* Responsive Footer */
@media (max-width: 991px) {
    .baier-footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .baier-footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .baier-footer-bottom-inner {
        justify-content: center;
        text-align: center;
    }

    .baier-footer-bottom-links {
        justify-content: center;
    }
}

/* ============================================
   ORIGINAL FOOTER NUR AUF STARTSEITE VERSTECKEN
============================================ */
body.home .page-footer,
body.home #tt-footer,
body.home .footer-wrapper {
    display: none !important;
}

/* Back to Top Button nur auf Startseite verstecken */
body.home .back-to-top,
body.home .tt-back-to-top {
    display: none !important;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 991px) {
    .baier-hero-title .baier-brand {
        font-size: 3.5rem;
    }

    .baier-hero-title .baier-title-line {
        font-size: 1.8rem;
        letter-spacing: 5px;
    }

    .baier-about-content {
        padding-left: 0;
        margin-top: 40px;
    }

    .baier-features {
        grid-template-columns: 1fr;
    }

    .baier-section-header h2,
    .baier-about-content h2,
    .baier-contact-info h2,
    .baier-cta-content h2 {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .baier-hero {
        padding: 100px 0 60px;
    }

    .baier-hero-title .baier-brand {
        font-size: 2.5rem;
    }

    .baier-hero-title .baier-title-line {
        font-size: 1.3rem;
        letter-spacing: 3px;
    }

    .baier-hero-subtitle {
        font-size: 1rem;
    }

    .baier-hero-services {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    .baier-hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .baier-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }

    .baier-services,
    .baier-about,
    .baier-stats,
    .baier-why-us,
    .baier-contact,
    .baier-cta {
        padding: 60px 0;
    }

    .baier-section-header h2 {
        font-size: 1.8rem;
    }

    .baier-contact-form-wrapper {
        padding: 2rem 1.5rem;
        margin-top: 40px;
    }

    /* Bild auf Smartphones: volle Breite, keine Beschneidung */
    .baier-about-img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: unset !important;
        display: block;
    }

    .baier-about-image {
        padding: 10px !important;
    }

    .baier-about-badge {
        right: 10px;
        bottom: 20px;
        padding: 1rem 1.5rem;
    }

    .baier-badge-number {
        font-size: 2rem;
    }

    .baier-about-float-card {
        display: none;
    }

    .baier-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .baier-stat-number {
        font-size: 2.5rem;
    }
}

/* ============================================
   ANIMATIONS
============================================ */
.baier-service-card,
.baier-why-card,
.baier-stat,
.baier-contact-item {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.baier-service-card:nth-child(1) { animation-delay: 0.1s; }
.baier-service-card:nth-child(2) { animation-delay: 0.2s; }
.baier-service-card:nth-child(3) { animation-delay: 0.3s; }
.baier-service-card:nth-child(4) { animation-delay: 0.4s; }

.baier-why-card:nth-child(1) { animation-delay: 0.1s; }
.baier-why-card:nth-child(2) { animation-delay: 0.2s; }
.baier-why-card:nth-child(3) { animation-delay: 0.3s; }

.baier-stat:nth-child(1) { animation-delay: 0.1s; }
.baier-stat:nth-child(2) { animation-delay: 0.2s; }
.baier-stat:nth-child(3) { animation-delay: 0.3s; }
.baier-stat:nth-child(4) { animation-delay: 0.4s; }

/* ============================================
   SCROLLBAR
============================================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--baier-bg-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--baier-border);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--baier-orange);
}

/* ============================================
   SELECTION
============================================ */
::selection {
    background: var(--baier-orange);
    color: var(--baier-white);
}

/* ============================================
   SMOOTH SCROLL
============================================ */
html {
    scroll-behavior: smooth;
}

/* ============================================
   SERVICE-ANGEBOTE SEITE - "LESEN SIE MEHR" BUTTONS AUSBLENDEN
============================================ */
/* Versteckt die "Read more" / "Lesen Sie mehr" Buttons auf der Service-Angebote Seite */
/* WICHTIG: Header-Button (.tt-col__item .tt-btn) ausschließen! */
/* Post Type Archive */
body.post-type-archive-electrician_services .blog-obj__row-btn,
body.post-type-archive-electrician_services #tt-pageContent .tt-btn.btn__color01,
body.post-type-archive-electrician_services a.more-link,
body.tax-electrician_services_cat .blog-obj__row-btn,
body.tax-electrician_services_cat #tt-pageContent .tt-btn.btn__color01,
body.tax-electrician_services_cat a.more-link,
/* Page mit Slug "service-angebote" */
body.page-service-angebote .blog-obj__row-btn,
body.page-service-angebote #tt-pageContent .tt-btn.btn__color01,
body.page-service-angebote a.more-link,
body[class*="service-angebote"] .blog-obj__row-btn,
body[class*="service-angebote"] #tt-pageContent .tt-btn.btn__color01,
body[class*="service-angebote"] a.more-link,
/* Fallback für alle Service-bezogenen Seiten */
body.page-template-page-services .blog-obj__row-btn,
body.page-template-page-services #tt-pageContent .tt-btn.btn__color01,
body.page-template-page-services a.more-link,
/* Allgemeine "Read more" Links auf Service-Seiten */
body.post-type-archive-electrician_services .read-more,
body.post-type-archive-electrician_services [class*="read-more"],
body.page-service-angebote .read-more,
body.page-service-angebote [class*="read-more"],
body[class*="service-angebote"] .read-more,
body[class*="service-angebote"] [class*="read-more"] {
    display: none !important;
}

/* ============================================
   MOBILE OPTIMIERUNGEN - SMARTPHONES
============================================ */

/* Kleine Smartphones (bis 480px) */
@media (max-width: 480px) {
    /* Hero Section Mobile */
    .baier-hero {
        min-height: auto;
        padding: 80px 15px 50px;
    }

    .baier-hero-title .baier-brand {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .baier-hero-title .baier-title-line {
        font-size: 1.1rem;
        letter-spacing: 2px;
    }

    .baier-hero-subtitle {
        font-size: 0.9rem;
        padding: 0 10px;
    }

    .baier-hero-services {
        font-size: 0.65rem;
        letter-spacing: 0.5px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .baier-hero-services span {
        display: inline-block;
        margin-bottom: 5px;
    }

    /* Hero dekorative Elemente auf Mobile reduzieren */
    .baier-hero-industrial-left,
    .baier-hero-electric-right,
    .baier-hero-circuit,
    .baier-hero-icon {
        opacity: 0.3;
    }

    .baier-hero-glow {
        width: 400px;
        height: 300px;
    }

    /* Buttons Mobile */
    .baier-hero-buttons {
        gap: 12px;
        width: 100%;
        padding: 0 15px;
    }

    .baier-btn {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
        text-align: center;
        justify-content: center;
    }

    .baier-btn-outline {
        width: 100%;
    }

    /* Sections Mobile */
    .baier-services,
    .baier-about,
    .baier-stats,
    .baier-why-us,
    .baier-contact,
    .baier-cta {
        padding: 50px 15px;
    }

    .baier-section-header {
        margin-bottom: 30px;
    }

    .baier-section-header h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .baier-section-header p {
        font-size: 0.9rem;
        padding: 0 10px;
    }

    .baier-section-tag {
        font-size: 0.7rem;
        padding: 0.3rem 1rem;
    }

    /* Service Cards Mobile */
    .baier-services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
    }

    .baier-service-card {
        padding: 25px 20px;
    }

    .baier-service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .baier-service-card h3 {
        font-size: 1.1rem;
    }

    .baier-service-card p {
        font-size: 0.85rem;
    }

    .baier-service-link {
        font-size: 0.85rem;
        padding: 10px 0;
    }

    /* Stats Mobile */
    .baier-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .baier-stat {
        padding: 20px 15px;
    }

    .baier-stat-number {
        font-size: 2rem;
    }

    .baier-stat-label {
        font-size: 0.75rem;
    }

    /* About Section Mobile */
    .baier-about-image {
        margin-bottom: 30px;
        padding: 10px;
    }

    .baier-about-img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: unset !important;
        border-radius: 12px;
        display: block;
    }

    .baier-about-image-placeholder {
        height: 280px;
    }

    .baier-about-badge {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: -40px;
        margin-left: auto;
        margin-right: 20px;
        width: fit-content;
    }

    .baier-about-content h2 {
        font-size: 1.5rem;
    }

    .baier-about-content p {
        font-size: 0.9rem;
    }

    .baier-feature-item {
        padding: 15px;
    }

    .baier-feature-item i {
        font-size: 1.2rem;
    }

    .baier-feature-item span {
        font-size: 0.85rem;
    }

    /* Why Us Cards Mobile */
    .baier-why-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .baier-why-card {
        padding: 25px 20px;
    }

    .baier-why-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }

    .baier-why-card h3 {
        font-size: 1.1rem;
    }

    /* Contact Section Mobile */
    .baier-contact-grid {
        gap: 20px;
    }

    .baier-contact-item {
        padding: 20px 15px;
        flex-direction: column;
        text-align: center;
    }

    .baier-contact-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .baier-contact-info h2 {
        font-size: 1.5rem;
    }

    .baier-contact-form-wrapper {
        padding: 25px 20px;
        margin-top: 30px;
    }

    .baier-contact-form-wrapper h3 {
        font-size: 1.2rem;
    }

    .baier-form-group input,
    .baier-form-group textarea {
        padding: 14px 16px;
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }

    .baier-form-submit {
        width: 100%;
        padding: 16px;
        font-size: 1rem;
    }

    /* CTA Section Mobile */
    .baier-cta-content h2 {
        font-size: 1.5rem;
    }

    .baier-cta-content p {
        font-size: 0.9rem;
    }

    .baier-cta-buttons {
        width: 100%;
        padding: 0 15px;
    }

    .baier-cta-buttons .baier-btn {
        width: 100%;
    }

    /* Footer Mobile */
    .baier-footer {
        padding: 50px 15px 20px;
    }

    .baier-footer-content {
        gap: 25px;
    }

    .baier-footer-section h4 {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .baier-footer-section p,
    .baier-footer-section a {
        font-size: 0.85rem;
    }

    .baier-footer-logo {
        font-size: 1.3rem;
    }

    .baier-footer-bottom-inner {
        flex-direction: column;
        gap: 15px;
    }

    .baier-footer-bottom-links {
        flex-direction: column;
        gap: 10px;
    }

    /* Header/Navigation Mobile */
    #tt-header .tt-header-holder,
    .page-header .navbar {
        padding: 10px 15px;
    }

    /* Cart Dropdown Mobile */
    .header-cart-dropdown,
    .tt-obj__dropdown {
        min-width: 280px !important;
        max-width: calc(100vw - 30px) !important;
        right: 15px !important;
        left: auto !important;
    }

    /* Touch-freundliche Elemente */
    .baier-service-card,
    .baier-why-card,
    .baier-contact-item {
        -webkit-tap-highlight-color: transparent;
    }

    /* Scroll-Verbesserungen */
    .baier-services-grid,
    .baier-why-grid,
    .baier-stats-grid {
        -webkit-overflow-scrolling: touch;
    }
}

/* Sehr kleine Geräte (bis 360px) */
@media (max-width: 360px) {
    .baier-hero-title .baier-brand {
        font-size: 1.7rem;
    }

    .baier-hero-title .baier-title-line {
        font-size: 1rem;
    }

    .baier-section-header h2 {
        font-size: 1.3rem;
    }

    .baier-stats-grid {
        grid-template-columns: 1fr;
    }

    .baier-stat-number {
        font-size: 2.5rem;
    }

    .baier-about-img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: unset !important;
    }

    .baier-about-image-placeholder {
        height: 220px;
    }
}

/* Landscape Modus auf Smartphones */
@media (max-width: 767px) and (orientation: landscape) {
    .baier-hero {
        min-height: auto;
        padding: 60px 20px 40px;
    }

    .baier-hero-title .baier-brand {
        font-size: 2rem;
    }

    .baier-hero-buttons {
        flex-direction: row;
        justify-content: center;
    }

    .baier-btn {
        width: auto;
    }

    .baier-services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .baier-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Touch-Geräte allgemein */
@media (hover: none) and (pointer: coarse) {
    /* Hover-Effekte entfernen für Touch */
    .baier-service-card:hover {
        transform: none;
    }

    .baier-service-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    .baier-why-card:hover {
        transform: none;
    }

    .baier-why-card:active {
        transform: scale(0.98);
    }

    .baier-btn:hover {
        transform: none;
    }

    .baier-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    /* Größere Touch-Targets */
    .baier-service-link {
        padding: 15px 0;
    }

    .baier-footer-section a {
        padding: 8px 0;
        display: inline-block;
    }

    /* Bessere Sichtbarkeit für Touch */
    .baier-contact-item:active {
        background: var(--baier-bg-card-hover);
    }
}

/* iOS-spezifische Fixes */
@supports (-webkit-touch-callout: none) {
    /* Input Zoom verhindern */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Safe Area für Notch-Geräte */
    .baier-hero {
        padding-top: calc(80px + env(safe-area-inset-top));
    }

    .baier-footer-bottom {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    /* Smooth Scroll Fix für iOS */
    html {
        -webkit-overflow-scrolling: touch;
    }
}

/* Android Chrome Address Bar Fix */
@media (max-width: 767px) {
    .baier-hero {
        min-height: calc(100vh - 56px); /* Standard Chrome Mobile Bar */
        min-height: calc(100svh - 56px); /* Small Viewport Height */
    }
}

/* Animationen auf Mobile reduzieren für Performance */
@media (max-width: 767px) {
    .baier-hero-glow {
        animation: none;
        opacity: 0.5;
    }

    .baier-circuit-node {
        animation: none;
    }

    .baier-hero-icon {
        animation: none;
    }

    .baier-hero-particles {
        display: none;
    }

    /* Schnellere Animationen */
    .baier-service-card,
    .baier-why-card,
    .baier-stat,
    .baier-contact-item {
        animation-duration: 0.4s;
    }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .baier-hero-glow,
    .baier-circuit-node,
    .baier-hero-icon,
    .baier-service-card,
    .baier-why-card,
    .baier-stat,
    .baier-contact-item {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}