.elementor-403 .elementor-element.elementor-element-032441c{--display:flex;--min-height:100vh;}.elementor-403 .elementor-element.elementor-element-032441c:not(.elementor-motion-effects-element-type-background), .elementor-403 .elementor-element.elementor-element-032441c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-widget-portfolio a .elementor-portfolio-item__overlay{background-color:var( --e-global-color-accent );}.elementor-widget-portfolio .elementor-portfolio-item__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-portfolio .elementor-portfolio__filter{color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-portfolio .elementor-portfolio__filter.elementor-active{color:var( --e-global-color-primary );}.elementor-403 .elementor-element.elementor-element-544f1b3{--grid-row-gap:0px;width:100%;max-width:100%;z-index:10;--grid-column-gap:52px;}.elementor-403 .elementor-element.elementor-element-544f1b3 > .elementor-widget-container{padding:10% 10% 0% 10%;}.elementor-403 .elementor-element.elementor-element-544f1b3.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-403 .elementor-element.elementor-element-544f1b3 a .elementor-portfolio-item__overlay{background-color:var( --e-global-color-text );}.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio-item__title{font-family:"Roboto", Sans-serif;font-size:43px;font-weight:600;}.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio__filter.elementor-active{color:#E4E4E4;}.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio__filter{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio__filter:not(:last-child){margin-right:calc(41px/2);}.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio__filter:not(:first-child){margin-left:calc(41px/2);}.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio__filters{margin-bottom:30px;}@media(min-width:768px){.elementor-403 .elementor-element.elementor-element-032441c{--content-width:100%;}}/* Start custom CSS for portfolio, class: .elementor-element-544f1b3 *//* ============================================================
   1. DIE "SCHIENE" BAUEN (Wichtig für Sticky!)
   ============================================================ */
/* Macht das Widget zu einer Box mit zwei Spalten (Links Leiste, Rechts Bilder) */
.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-widget-container {
    display: flex !important;
    align-items: flex-start !important;
    position: relative !important;
}

/* ============================================================
   2. KATEGORIEN-LEISTE (Kugelsicher Sticky)
   ============================================================ */
.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio__filters {
    /* Sticky lässt die Leiste scrollen, bis sie die definierte 'top' Position erreicht, 
       dann bleibt sie dort stehen, während die Bilder weiterlaufen. */
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 40vh !important; /* Bleibt auf 40% der Bildschirmhöhe stehen */
    
    width: 180px !important;
    flex-shrink: 0 !important; /* Verhindert, dass Bilder die Leiste zerdrücken */
    z-index: 9999 !important;
    
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important; /* Hebt fehlerhafte Elementor-Transforms auf */
}

/* Design der einzelnen Begriffe */
.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio__filter {
    display: block !important;
    padding: 10px 0 !important;
    color: #666 !important;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio__filter.elementor-active,
.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio__filter:hover {
    color: #ffffff !important;
    padding-left: 10px !important;
}

/* ============================================================
   3. BILDER-RASTER (Rechts)
   ============================================================ */
.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio {
    flex-grow: 1 !important;
    margin-left: 20px !important; /* Leichter Abstand zur Schrift */
    width: 100% !important;
}

/* ============================================================
   4. EXAKT 8 PROJEKTE PRO BILDSCHIRM
   ============================================================ */
.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio-item {
    height: 38vh !important; 
    margin-bottom: 4vh !important;
}

/* ============================================================
   5. SCROLL SNAPPING (Das Einrasten nach 8 Bildern)
   ============================================================ */
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.elementor-403 .elementor-element.elementor-element-544f1b3 .elementor-portfolio-item:nth-child(8n + 1) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 15vh; 
}/* End custom CSS */