.elementor-2258 .elementor-element.elementor-element-f7bd9ef{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0200px;--row-gap:0px;--column-gap:0200px;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:180px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:5000;}.elementor-2258 .elementor-element.elementor-element-f7bd9ef.e-con{--align-self:center;}.elementor-2258 .elementor-element.elementor-element-f79ca68{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:15px 15px 15px 15px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2258 .elementor-element.elementor-element-f79ca68.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2258 .elementor-element.elementor-element-d61319a{width:100%;max-width:100%;margin:-8px 124px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-2258 .elementor-element.elementor-element-d61319a.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2258 .elementor-element.elementor-element-d61319a img{width:49%;max-width:100%;}.elementor-2258 .elementor-element.elementor-element-54f796e{--display:flex;--min-height:0rem;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2258 .elementor-element.elementor-element-54f796e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2258 .elementor-element.elementor-element-a1a12c4{width:var( --container-widget-width, 102.745% );max-width:102.745%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:102.745%;--container-widget-flex-grow:0;z-index:10000;}.elementor-2258 .elementor-element.elementor-element-a1a12c4.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2258 .elementor-element.elementor-element-a1a12c4 .elementor-menu-toggle{margin:0 auto;background-color:#005A23;}.elementor-2258 .elementor-element.elementor-element-a1a12c4 .elementor-nav-menu--dropdown a, .elementor-2258 .elementor-element.elementor-element-a1a12c4 .elementor-menu-toggle{color:#FFFFFF;fill:#FFFFFF;}.elementor-2258 .elementor-element.elementor-element-a1a12c4 .elementor-nav-menu--dropdown{background-color:#000000;}.elementor-2258 .elementor-element.elementor-element-a1a12c4 .elementor-nav-menu--dropdown .elementor-item, .elementor-2258 .elementor-element.elementor-element-a1a12c4 .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:"Poppins", Sans-serif;}.elementor-2258 .elementor-element.elementor-element-a1a12c4 div.elementor-menu-toggle{color:#FFFFFF;}.elementor-2258 .elementor-element.elementor-element-a1a12c4 div.elementor-menu-toggle svg{fill:#FFFFFF;}.elementor-2258 .elementor-element.elementor-element-c8b749c{--display:flex;--min-height:270px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;}.elementor-2258 .elementor-element.elementor-element-c8b749c:not(.elementor-motion-effects-element-type-background), .elementor-2258 .elementor-element.elementor-element-c8b749c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFBF3;}.elementor-2258 .elementor-element.elementor-element-c8b749c.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-2258 .elementor-element.elementor-element-a259692{width:var( --container-widget-width, 88% );max-width:88%;--container-widget-width:88%;--container-widget-flex-grow:0;}.elementor-2258 .elementor-element.elementor-element-a259692.elementor-element{--align-self:center;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1366px){.elementor-2258 .elementor-element.elementor-element-f7bd9ef{--gap:0px 200px;--row-gap:0px;--column-gap:200px;--margin-top:0px;--margin-bottom:180px;--margin-left:0px;--margin-right:0px;}.elementor-2258 .elementor-element.elementor-element-d61319a{margin:-7px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 16px;}.elementor-2258 .elementor-element.elementor-element-d61319a img{width:67px;}.elementor-2258 .elementor-element.elementor-element-c8b749c{--min-height:222px;}}@media(max-width:1024px){.elementor-2258 .elementor-element.elementor-element-f7bd9ef{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:500px 500px;--row-gap:500px;--column-gap:500px;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}.elementor-2258 .elementor-element.elementor-element-f79ca68{--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-2258 .elementor-element.elementor-element-d61319a{width:var( --container-widget-width, 148px );max-width:148px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:148px;--container-widget-flex-grow:0;text-align:start;}.elementor-2258 .elementor-element.elementor-element-d61319a img{width:100%;max-width:100%;}.elementor-2258 .elementor-element.elementor-element-54f796e{--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-2258 .elementor-element.elementor-element-a1a12c4{--container-widget-width:100px;--container-widget-flex-grow:0;width:var( --container-widget-width, 100px );max-width:100px;}.elementor-2258 .elementor-element.elementor-element-c8b749c{--min-height:374px;}}@media(max-width:767px){.elementor-2258 .elementor-element.elementor-element-f7bd9ef{--justify-content:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2258 .elementor-element.elementor-element-f79ca68{--width:76%;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:-5px;--margin-right:0px;}.elementor-2258 .elementor-element.elementor-element-d61319a{width:var( --container-widget-width, 158.672px );max-width:158.672px;margin:-6px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -60px;padding:0px 0px 0px 0px;--container-widget-width:158.672px;--container-widget-flex-grow:0;text-align:start;}.elementor-2258 .elementor-element.elementor-element-d61319a img{width:47%;}.elementor-2258 .elementor-element.elementor-element-54f796e{--width:19%;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2258 .elementor-element.elementor-element-54f796e.e-con{--align-self:center;}.elementor-2258 .elementor-element.elementor-element-a1a12c4{width:auto;max-width:auto;--nav-menu-icon-size:24px;}.elementor-2258 .elementor-element.elementor-element-a1a12c4 .elementor-nav-menu--dropdown .elementor-item, .elementor-2258 .elementor-element.elementor-element-a1a12c4 .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:18px;}.elementor-2258 .elementor-element.elementor-element-a1a12c4 .elementor-nav-menu--dropdown a{padding-left:40px;padding-right:40px;padding-top:20px;padding-bottom:20px;}.elementor-2258 .elementor-element.elementor-element-a259692{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-2258 .elementor-element.elementor-element-f7bd9ef{--width:100%;}.elementor-2258 .elementor-element.elementor-element-f79ca68{--width:12.427%;}.elementor-2258 .elementor-element.elementor-element-54f796e{--width:70%;}.elementor-2258 .elementor-element.elementor-element-c8b749c{--width:100%;}}@media(max-width:1366px) and (min-width:768px){.elementor-2258 .elementor-element.elementor-element-c8b749c{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-2258 .elementor-element.elementor-element-f79ca68{--width:10%;}.elementor-2258 .elementor-element.elementor-element-54f796e{--width:85%;}}@media(min-width:2400px){.elementor-2258 .elementor-element.elementor-element-f7bd9ef{--gap:0px 420px;--row-gap:0px;--column-gap:420px;}.elementor-2258 .elementor-element.elementor-element-f79ca68{--width:176.906px;}.elementor-2258 .elementor-element.elementor-element-d61319a{margin:-12px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-2258 .elementor-element.elementor-element-d61319a img{width:142px;}.elementor-2258 .elementor-element.elementor-element-c8b749c{--width:100%;}}/* Start custom CSS for nav-menu, class: .elementor-element-a1a12c4 *//* ==========================================================================
   SuchFokus NAVIGATION - OKLCH Design System
   Matching index.html Styles
   ========================================================================== */

/* === CSS VARIABLES (OKLCH) === */
:root {
    /* Light Mode */
    --nav-background: oklch(0.9711 0.0074 80.7211);
    --nav-foreground: oklch(0.3000 0.0358 30.2042);
    --nav-primary: oklch(0.5234 0.1347 144.1672);
    --nav-primary-hover: oklch(0.6731 0.1624 144.2083);
    --nav-muted: oklch(0.9370 0.0142 74.4218);
    --nav-muted-foreground: oklch(0.4495 0.0486 39.2110);
    --nav-border: oklch(0.8805 0.0208 74.6428);
    --nav-accent: oklch(0.8952 0.0504 146.0366);
    
    /* Typography */
    --font-sans: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, monospace;
    
    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

/* Dark Mode */
.dark {
    --nav-background: oklch(0.2683 0.0279 150.7681);
    --nav-foreground: oklch(0.9423 0.0097 72.6595);
    --nav-primary: oklch(0.6731 0.1624 144.2083);
    --nav-primary-hover: oklch(0.7660 0.1179 145.2950);
    --nav-muted: oklch(0.2926 0.0212 147.7496);
    --nav-muted-foreground: oklch(0.8579 0.0174 76.0955);
    --nav-border: oklch(0.3942 0.0265 142.9926);
    --nav-accent: oklch(0.5752 0.1446 144.1813);
}

/* ==========================================================================
   1. CONTAINER & LAYOUT
   ========================================================================== */
.elementor-nav-menu--main .elementor-nav-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: 100% !important;
}

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children {
    position: relative !important;
}

/* ==========================================================================
   LEVEL 1: MAIN NAV BUTTONS
   ========================================================================== */

.elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item {
    /* Layout */
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 6px !important;
    position: relative !important;
    white-space: nowrap !important;
    
    /* Size & Typography */
    padding: 10px 18px !important; 
    margin: 0 2px !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important; 
    font-size: 14px !important; 
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    
    /* Glass Style */
    background: oklch(0.9711 0.0074 80.7211 / 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--nav-border) !important;
    color: var(--nav-foreground) !important;
    
    /* Shadow & Transition */
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 10 !important;
}

/* Dark Mode Nav Items */
.dark .elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item {
    background: oklch(0.2683 0.0279 150.7681 / 0.6) !important;
    border-color: var(--nav-border) !important;
    color: var(--nav-foreground) !important;
}

/* Hover & Active State */
.elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item:hover,
.elementor-nav-menu--main > .elementor-nav-menu > .menu-item.current-menu-item > .elementor-item {
    background: var(--nav-background) !important;
    color: var(--nav-primary) !important;
    border-color: var(--nav-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px oklch(0.5234 0.1347 144.1672 / 0.15) !important;
}

.dark .elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item:hover,
.dark .elementor-nav-menu--main > .elementor-nav-menu > .menu-item.current-menu-item > .elementor-item {
    background: var(--nav-muted) !important;
    color: var(--nav-primary) !important;
    border-color: var(--nav-primary) !important;
    box-shadow: 0 8px 20px oklch(0.6731 0.1624 144.2083 / 0.2) !important;
}

/* Sub Arrows */
.elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item .sub-arrow {
    font-size: 10px !important;
    color: var(--nav-muted-foreground) !important;
    transition: color 0.3s ease !important;
}

.elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item:hover .sub-arrow {
    color: var(--nav-primary) !important;
}

/* Text Layer */
.elementor-nav-menu .elementor-item-content {
    position: relative !important; 
    z-index: 5 !important;
}

/* ==========================================================================
   LEVEL 2: DROPDOWNS
   ========================================================================== */

.elementor-nav-menu--main .sub-menu {
    width: auto !important;
    min-width: 240px !important;
    overflow: visible !important; 
    
    /* Glassmorphism Dropdown */
    background: oklch(0.9711 0.0074 80.7211 / 0.95) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    border: 1px solid var(--nav-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 10px !important;
    
    /* Shadow */
    box-shadow: 0 20px 40px oklch(0 0 0 / 0.1), 
                0 8px 16px oklch(0 0 0 / 0.08) !important;
    
    /* Animation */
    opacity: 0 !important; 
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Dark Mode Dropdown */
.dark .elementor-nav-menu--main .sub-menu {
    background: oklch(0.2683 0.0279 150.7681 / 0.95) !important;
    border-color: var(--nav-border) !important;
    box-shadow: 0 20px 40px oklch(0 0 0 / 0.3), 
                0 8px 16px oklch(0 0 0 / 0.2) !important;
}

/* Dropdown Position (Level 2) */
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > .sub-menu {
    top: 100% !important; 
    left: 50% !important; 
    margin-top: 15px !important;
    transform: translate(-50%, 10px) !important;
}

/* Dropdown Hover (Level 2) */
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu {
    opacity: 1 !important; 
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

/* ==========================================================================
   LEVEL 3: NESTED DROPDOWNS (Flyout)
   ========================================================================== */

.sub-menu .menu-item-has-children {
    position: relative !important;
}

/* Level 3 Position */
.elementor-nav-menu--main .sub-menu .menu-item-has-children > .sub-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: -5px !important;
    margin-left: 15px !important;
    transform: translateX(-10px) !important; 
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Level 3 Hover */
.elementor-nav-menu--main .sub-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

/* Arrow for Level 3 */
.sub-menu .menu-item-has-children > .elementor-sub-item::after {
    content: '>';
    font-family: var(--font-mono);
    font-size: 12px;
    margin-left: auto;
    color: var(--nav-muted-foreground);
    font-weight: 600;
    transition: color 0.2s ease;
}

.sub-menu .menu-item-has-children:hover > .elementor-sub-item::after {
    color: var(--nav-primary);
}

/* ==========================================================================
   SUB-MENU ITEMS (All Levels)
   ========================================================================== */

.sub-menu .elementor-sub-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 15px !important;
    margin-bottom: 2px !important;
    border-radius: var(--radius-sm) !important;
    color: var(--nav-foreground) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

/* Sub-Menu Hover */
.sub-menu .elementor-sub-item:hover {
    background: var(--nav-accent) !important;
    color: var(--nav-primary) !important;
    padding-left: 20px !important;
}

.dark .sub-menu .elementor-sub-item:hover {
    background: oklch(0.5752 0.1446 144.1813 / 0.15) !important;
    color: var(--nav-primary) !important;
}

/* ==========================================================================
   RESPONSIVE - LAPTOP & NOTEBOOK
   ========================================================================== */

/* Large Laptop (1280px - 1366px) */
@media (max-width: 1366px) {
    .elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item {
        padding: 8px 12px !important;
        font-size: 13px !important;
        margin: 0 1px !important;
        letter-spacing: 0.03em !important;
    }
    .elementor-nav-menu--main .elementor-nav-menu {
        gap: 4px !important;
    }
}

/* Medium Laptop (1200px - 1279px) */
@media (max-width: 1279px) {
    .elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item {
        padding: 7px 10px !important;
        font-size: 12px !important;
        margin: 0 1px !important;
        border-radius: 10px !important;
    }
    .elementor-nav-menu--main .elementor-nav-menu {
        gap: 4px !important;
    }
}

/* Small Laptop (1100px - 1199px) */
@media (max-width: 1199px) {
    .elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item {
        padding: 6px 8px !important;
        font-size: 11px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        letter-spacing: 0.02em !important;
    }
    .elementor-nav-menu--main .elementor-nav-menu {
        gap: 3px !important;
    }
    
    /* Hide sub-arrows on smaller screens */
    .elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item .sub-arrow {
        font-size: 8px !important;
    }
}

/* Very Small Laptop / Large Tablet (1024px - 1099px) */
@media (max-width: 1099px) {
    .elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item {
        padding: 5px 6px !important;
        font-size: 10px !important;
        border-radius: var(--radius-sm) !important;
        letter-spacing: 0 !important;
    }
    .elementor-nav-menu--main .elementor-nav-menu {
        gap: 3px !important;
    }
    
    /* Optional: hide text-transform on very small */
    .elementor-nav-menu--main > .elementor-nav-menu > .menu-item > .elementor-item {
        text-transform: none !important;
    }
}

/* ==========================================================================
   MOBILE MENU (Hamburger Menu Styles)
   ========================================================================== */

@media (max-width: 1024px) {
    /* Mobile Menu Container */
    .elementor-nav-menu--dropdown {
        background: var(--nav-background) !important;
        border: 1px solid var(--nav-border) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 20px 40px oklch(0 0 0 / 0.15) !important;
        padding: 10px !important;
    }
    
    .dark .elementor-nav-menu--dropdown {
        background: var(--nav-background) !important;
        border-color: var(--nav-border) !important;
    }
    
    /* Mobile Menu Items */
    .elementor-nav-menu--dropdown .elementor-item,
    .elementor-nav-menu--dropdown .elementor-sub-item {
        padding: 12px 16px !important;
        border-radius: var(--radius-sm) !important;
        font-family: var(--font-sans) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--nav-foreground) !important;
        transition: all 0.2s ease !important;
    }
    
    .elementor-nav-menu--dropdown .elementor-item:hover,
    .elementor-nav-menu--dropdown .elementor-sub-item:hover {
        background: var(--nav-accent) !important;
        color: var(--nav-primary) !important;
    }
    
    /* Hamburger Icon */
    .elementor-menu-toggle {
        color: var(--nav-foreground) !important;
    }
    
    .elementor-menu-toggle:hover {
        color: var(--nav-primary) !important;
    }
}

/* ==========================================================================
   CTA BUTTON IN NAV (If applicable)
   ========================================================================== */

.elementor-nav-menu--main .menu-item.nav-cta > .elementor-item {
    background: var(--nav-foreground) !important;
    color: var(--nav-background) !important;
    border-color: var(--nav-foreground) !important;
}

.elementor-nav-menu--main .menu-item.nav-cta > .elementor-item:hover {
    background: var(--nav-primary) !important;
    border-color: var(--nav-primary) !important;
    color: white !important;
}

.dark .elementor-nav-menu--main .menu-item.nav-cta > .elementor-item {
    background: var(--nav-primary) !important;
    color: oklch(0.2157 0.0453 145.7256) !important;
    border-color: var(--nav-primary) !important;
}

.dark .elementor-nav-menu--main .menu-item.nav-cta > .elementor-item:hover {
    background: var(--nav-primary-hover) !important;
    border-color: var(--nav-primary-hover) !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f7bd9ef *//* ==========================================================================
   SuchFokus HEADER - OKLCH Design System
   Matching index.html Styles
   ========================================================================== */

/* === CSS VARIABLES (OKLCH) === */
.header {
    /* Light Mode Colors */
    --header-background: oklch(0.9711 0.0074 80.7211 / 0.85);
    --header-foreground: oklch(0.3000 0.0358 30.2042);
    --header-primary: oklch(0.5234 0.1347 144.1672);
    --header-border: oklch(0.8805 0.0208 74.6428);
    --header-muted: oklch(0.9370 0.0142 74.4218);
    --header-shadow: 0 4px 20px oklch(0 0 0 / 0.08);
    
    /* Typography */
    --font-sans: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, monospace;
    
    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 32px;
}

/* Dark Mode */
.dark .header,
.header.dark {
    --header-background: oklch(0.2683 0.0279 150.7681 / 0.9);
    --header-foreground: oklch(0.9423 0.0097 72.6595);
    --header-primary: oklch(0.6731 0.1624 144.2083);
    --header-border: oklch(0.3942 0.0265 142.9926);
    --header-muted: oklch(0.2926 0.0212 147.7496);
    --header-shadow: 0 4px 20px oklch(0 0 0 / 0.2);
}

/* === BASE HEADER STYLING === */
.header {
    position: fixed !important;
    z-index: 9999 !important;
    
    /* Glassmorphism with OKLCH */
    background: var(--header-background) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    
    /* Border */
    border: 1px solid var(--header-border) !important;
    
    /* Shadow */
    box-shadow: var(--header-shadow) !important;

    /* Animation */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                width 0.3s ease, 
                left 0.3s ease, 
                right 0.3s ease,
                border-radius 0.3s ease,
                background 0.3s ease !important;
    will-change: transform;
}

/* Hide on Scroll */
.header.hidden {
    transform: translateY(calc(-100% - 20px)) !important;
}

/* ==========================================================================
   BREAKPOINT 1: DESKTOP / WIDESCREEN (> 1366px)
   ========================================================================== */
@media (min-width: 1367px) {
    .header {
        top: 20px;
        left: 150px !important; 
        right: 150px !important;
        width: auto !important;
        border-radius: var(--radius-xl) !important;
        padding: 15px 40px !important;
    }
}

/* ==========================================================================
   BREAKPOINT 2: LAPTOP (1025px - 1366px)
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1366px) {
    .header {
        top: 15px;
        left: 40px !important; 
        right: 40px !important;
        width: auto !important;
        border-radius: 20px !important;
        padding: 12px 25px !important;
    }
}

/* ==========================================================================
   BREAKPOINT 3: TABLET (768px - 1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .header {
        top: 15px;
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
        border-radius: var(--radius-lg) !important;
        padding: 10px 20px !important;
    }
}

/* ==========================================================================
   BREAKPOINT 4: MOBILE (< 767px)
   ========================================================================== */
@media (max-width: 767px) {
    .header {
        top: 10px;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        border-radius: var(--radius-md) !important;
        padding: 10px 15px !important;
        
        /* More opaque on mobile */
        --header-background: oklch(0.9711 0.0074 80.7211 / 0.95);
    }
    
    .dark .header,
    .header.dark {
        --header-background: oklch(0.2683 0.0279 150.7681 / 0.95);
    }
    
    .header.hidden {
        transform: translateY(calc(-100% - 15px)) !important;
    }
}

/* ==========================================================================
   SCROLLED STATE (Optional - when scrolled down)
   ========================================================================== */
.header.scrolled {
    --header-background: oklch(0.9711 0.0074 80.7211 / 0.95);
    box-shadow: 0 8px 30px oklch(0 0 0 / 0.12) !important;
}

.dark .header.scrolled,
.header.dark.scrolled {
    --header-background: oklch(0.2683 0.0279 150.7681 / 0.95);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a259692 *//* =========================================
   SuchFokus - TOP BAR STYLING
   ========================================= */

/* Basis-Anpassungen für Desktop & Mobile */
#bc-top-contact {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Optionale feine Linie unten */
}

.bc-contact-link {
    transition: color 0.2s ease, transform 0.2s ease;
}

.bc-contact-link:hover {
    color: #22c55e !important; /* Dein Grünton beim Hover */
    transform: translateY(-1px);
}

/* =========================================
   MOBILE RESPONSIVE DESIGN (bis 900px)
   ========================================= */
@media screen and (max-width: 900px) {
    
    /* Container: Alles untereinander stapeln und zentrieren */
    .bc-contact-container {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 10px 15px !important;
    }

    /* Kontakt-Gruppe (Telefon & Mail): Untereinander */
    .bc-contact-info {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
        align-items: center !important;
    }

    /* Links: Größere Klickflächen für Finger (Touch-Friendly) */
    .bc-contact-link {
        width: 100%;
        justify-content: center;
        padding: 10px 15px;
        background-color: #f8fafc; /* Leichter Hintergrund für bessere Sichtbarkeit */
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    /* Icons etwas Abstand geben */
    .bc-contact-link svg, 
    .bc-location-info svg {
        margin-right: 8px !important;
    }

    /* Location Info: Etwas dezenter und kleiner */
    .bc-location-info {
        font-size: 13px !important;
        opacity: 0.8;
        margin-top: 5px;
        justify-content: center;
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   SEHR KLEINE SCREENS (Handy Hochformat < 400px)
   ========================================= */
@media screen and (max-width: 400px) {
    .bc-contact-link {
        font-size: 14px !important; /* Text etwas kleiner damit es passt */
    }
}/* End custom CSS */