.elementor-20193 .elementor-element.elementor-element-856696d{--display:flex;--min-height:55vh;--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20193 .elementor-element.elementor-element-653ab44{--display:flex;--min-height:55vh;--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;--overlay-opacity:0.35;--padding-top:0rem;--padding-bottom:2rem;--padding-left:0rem;--padding-right:0rem;}.elementor-20193 .elementor-element.elementor-element-653ab44:not(.elementor-motion-effects-element-type-background), .elementor-20193 .elementor-element.elementor-element-653ab44 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:var(--wpr-bg-8abc2520-f89c-4357-9a9e-61a4dd61c0ba);background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-20193 .elementor-element.elementor-element-653ab44::before, .elementor-20193 .elementor-element.elementor-element-653ab44 > .elementor-background-video-container::before, .elementor-20193 .elementor-element.elementor-element-653ab44 > .e-con-inner > .elementor-background-video-container::before, .elementor-20193 .elementor-element.elementor-element-653ab44 > .elementor-background-slideshow::before, .elementor-20193 .elementor-element.elementor-element-653ab44 > .e-con-inner > .elementor-background-slideshow::before, .elementor-20193 .elementor-element.elementor-element-653ab44 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, #FFFFFF00 0%, #000000 100%);}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-20193 .elementor-element.elementor-element-31850a6{text-align:left;}.elementor-20193 .elementor-element.elementor-element-31850a6 .elementor-heading-title{font-family:"komet", Sans-serif;font-size:3rem;font-weight:600;text-transform:uppercase;color:#FFFFFF;}.elementor-20193 .elementor-element.elementor-element-dff5aaa{--display:flex;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-20193 .elementor-element.elementor-element-dff5aaa:not(.elementor-motion-effects-element-type-background), .elementor-20193 .elementor-element.elementor-element-dff5aaa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-b86c2c4 );}.elementor-20193 .elementor-element.elementor-element-479ab24{--display:flex;--padding-top:6rem;--padding-bottom:3rem;--padding-left:0rem;--padding-right:0rem;}.elementor-20193 .elementor-element.elementor-element-14a93f1{width:100%;max-width:100%;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-20193 .elementor-element.elementor-element-e5d1496{--grid-columns:4;--grid-row-gap:2rem;--load-more-button-align:center;--grid-column-gap:2rem;}.elementor-20193 .elementor-element.elementor-element-e5d1496 .elementor-button{background-color:#405823;font-family:"komet", Sans-serif;font-size:1.1rem;font-weight:700;transition-duration:0.3s;border-radius:7px 7px 7px 7px;}.elementor-20193 .elementor-element.elementor-element-e5d1496 .elementor-button:hover, .elementor-20193 .elementor-element.elementor-element-e5d1496 .elementor-button:focus{background-color:#66882C;}.elementor-20193 .elementor-element.elementor-element-02311de{--grid-columns:1;--grid-row-gap:0rem;--load-more-button-align:center;--grid-column-gap:2rem;}.elementor-20193 .elementor-element.elementor-element-02311de .elementor-button{background-color:#405823;font-family:"komet", Sans-serif;font-size:1.1rem;font-weight:700;border-radius:7px 7px 7px 7px;}.elementor-20193 .elementor-element.elementor-element-02311de .elementor-button:hover, .elementor-20193 .elementor-element.elementor-element-02311de .elementor-button:focus{background-color:#66882C;}.elementor-20193 .elementor-element.elementor-element-f0e0f0a{--display:flex;--min-height:10vh;--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;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-20193 .elementor-element.elementor-element-dff5aaa{--padding-top:4rem;--padding-bottom:4rem;--padding-left:1rem;--padding-right:1rem;}.elementor-20193 .elementor-element.elementor-element-e5d1496{--grid-columns:2;}.elementor-20193 .elementor-element.elementor-element-02311de{--grid-columns:2;}}@media(max-width:767px){.elementor-20193 .elementor-element.elementor-element-653ab44{--padding-top:0rem;--padding-bottom:2rem;--padding-left:1rem;--padding-right:1rem;}.elementor-20193 .elementor-element.elementor-element-e5d1496{--grid-columns:1;}.elementor-20193 .elementor-element.elementor-element-02311de{--grid-columns:1;}}/* Start custom CSS for shortcode, class: .elementor-element-14a93f1 *//* In css/category-filter.css */
.category-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1em;
    background: #E2D5C5;
    border-radius: 8px;
    justify-content: flex-start;
    align-items: center;
}

.view-switcher {
    display: flex;
    gap: 0.5rem;
    margin-right: 1rem;
    padding-right: 1rem;
    border-right: 2px solid #405823;
}

.view-switcher-button {
    background: none;
    border: none;
    padding: 0.4em;
    cursor: pointer;
    color: #405823;
    opacity: 0.5;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-switcher-button:hover {
    opacity: 0.8;
}

.view-switcher-button.active {
    opacity: 1;
    color: white;
}

.view-switcher-button svg {
    width: 20px;
    height: 20px;
}

.category-filter-button {
    font-family: 'Komet';
    font-weight: 600;
    padding: 0.5em 1em;
    border: none;
    border-radius: 8px;
    color: white;
    background: #405823;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-filter-button:hover {
    background: #66882C;
}

.category-filter-button.active {
    background: #66882C;
    color: white;
}

/* Loading-Zustände */
.elementor-element-c235e06.loading,
.elementor-element-73bff32.loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.loading:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #E2D5C5;
    border-top: 4px solid #405823;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .category-filter-bar {
        gap: 0.5rem;
    }
    
    .category-filter-button {
        font-size: 0.9em;
        padding: 0.4em 0.8em;
    }
    
    .view-switcher {
        margin-right: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .view-switcher-button svg {
        width: 18px;
        height: 18px;
    }
}

/* Ergänzung zu Ihrem bestehenden CSS */
.view-switcher-button {
    font-family: 'Komet';
    font-weight: 600;
    padding: 0.5em 1em;
    border: none;
    border-radius: 8px;
    color: white;
    background: #405823;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-switcher-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.view-switcher-button:hover {
    background: #66882C;
}

.view-switcher-button.active {
    background: #66882C;
    
}/* End custom CSS */