.elementor-20216 .elementor-element.elementor-element-80bf5b9{--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-20216 .elementor-element.elementor-element-e091908{--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-20216 .elementor-element.elementor-element-e091908:not(.elementor-motion-effects-element-type-background), .elementor-20216 .elementor-element.elementor-element-e091908 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://hochbeet-hans.de/wp-content/uploads/2025/02/Hochbeete-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-20216 .elementor-element.elementor-element-e091908::before, .elementor-20216 .elementor-element.elementor-element-e091908 > .elementor-background-video-container::before, .elementor-20216 .elementor-element.elementor-element-e091908 > .e-con-inner > .elementor-background-video-container::before, .elementor-20216 .elementor-element.elementor-element-e091908 > .elementor-background-slideshow::before, .elementor-20216 .elementor-element.elementor-element-e091908 > .e-con-inner > .elementor-background-slideshow::before, .elementor-20216 .elementor-element.elementor-element-e091908 > .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-20216 .elementor-element.elementor-element-7a6ce38{text-align:start;}.elementor-20216 .elementor-element.elementor-element-7a6ce38 .elementor-heading-title{font-family:"komet", Sans-serif;font-size:3rem;font-weight:600;text-transform:uppercase;color:#FFFFFF;}.elementor-20216 .elementor-element.elementor-element-7a6ce38 .elementor-heading-title a{transition-duration:0s;}.elementor-20216 .elementor-element.elementor-element-c57d889{--display:flex;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-20216 .elementor-element.elementor-element-c57d889:not(.elementor-motion-effects-element-type-background), .elementor-20216 .elementor-element.elementor-element-c57d889 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-b86c2c4 );}.elementor-20216 .elementor-element.elementor-element-ba7bef1{--display:flex;--padding-top:6rem;--padding-bottom:3rem;--padding-left:0rem;--padding-right:0rem;}.elementor-20216 .elementor-element.elementor-element-a738fdb{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-20216 .elementor-element.elementor-element-891e6b2{--grid-columns:4;--grid-row-gap:2rem;--load-more-button-align:center;--grid-column-gap:2rem;}.elementor-20216 .elementor-element.elementor-element-891e6b2 .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-20216 .elementor-element.elementor-element-891e6b2 .elementor-button:hover, .elementor-20216 .elementor-element.elementor-element-891e6b2 .elementor-button:focus{background-color:#66882C;}.elementor-20216 .elementor-element.elementor-element-3b54742{--grid-columns:1;--grid-row-gap:0rem;--load-more-button-align:center;--grid-column-gap:2rem;}.elementor-20216 .elementor-element.elementor-element-3b54742 .elementor-button{background-color:#405823;font-family:"komet", Sans-serif;font-size:1.1rem;font-weight:700;border-radius:7px 7px 7px 7px;}.elementor-20216 .elementor-element.elementor-element-3b54742 .elementor-button:hover, .elementor-20216 .elementor-element.elementor-element-3b54742 .elementor-button:focus{background-color:#66882C;}.elementor-20216 .elementor-element.elementor-element-c8ed475{--display:flex;--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;--padding-top:4rem;--padding-bottom:04rem;--padding-left:0rem;--padding-right:0rem;}.elementor-20216 .elementor-element.elementor-element-c8ed475:not(.elementor-motion-effects-element-type-background), .elementor-20216 .elementor-element.elementor-element-c8ed475 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E2D5C5;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-20216 .elementor-element.elementor-element-f6361dc{width:var( --container-widget-width, 23% );max-width:23%;--container-widget-width:23%;--container-widget-flex-grow:0;border-style:none;}.elementor-20216 .elementor-element.elementor-element-f6361dc.elementor-element{--align-self:center;}.elementor-20216 .elementor-element.elementor-element-f6361dc:not( .elementor-widget-image ), .elementor-20216 .elementor-element.elementor-element-f6361dc.elementor-widget-image img{-webkit-mask-image:url( https://hochbeet-hans.de/wp-content/plugins/elementor/assets/mask-shapes/circle.svg );-webkit-mask-size:89%;-webkit-mask-position:center center;-webkit-mask-repeat:no-repeat;}.elementor-20216 .elementor-element.elementor-element-f6361dc img{width:85%;}.elementor-20216 .elementor-element.elementor-element-f3bebf9{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20216 .elementor-element.elementor-element-8c86a91 .elementor-heading-title{font-family:"komet", Sans-serif;font-size:1.4rem;font-weight:500;color:#405823;}.elementor-20216 .elementor-element.elementor-element-4173b36{--e-transform-rotateZ:-8deg;text-align:center;}.elementor-20216 .elementor-element.elementor-element-4173b36.elementor-element{--align-self:flex-end;}.elementor-20216 .elementor-element.elementor-element-4173b36 .elementor-heading-title{font-family:"adlery-pro", Sans-serif;font-size:1.4rem;font-weight:400;color:#405823;}.elementor-20216 .elementor-element.elementor-element-b49da04{--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(min-width:768px){.elementor-20216 .elementor-element.elementor-element-f3bebf9{--width:79%;}}@media(max-width:1024px){.elementor-20216 .elementor-element.elementor-element-c57d889{--padding-top:4rem;--padding-bottom:4rem;--padding-left:1rem;--padding-right:1rem;}.elementor-20216 .elementor-element.elementor-element-891e6b2{--grid-columns:2;}.elementor-20216 .elementor-element.elementor-element-3b54742{--grid-columns:2;}.elementor-20216 .elementor-element.elementor-element-c8ed475{--padding-top:4rem;--padding-bottom:4rem;--padding-left:1rem;--padding-right:1rem;}}@media(max-width:767px){.elementor-20216 .elementor-element.elementor-element-e091908{--padding-top:0rem;--padding-bottom:2rem;--padding-left:1rem;--padding-right:1rem;}.elementor-20216 .elementor-element.elementor-element-891e6b2{--grid-columns:1;}.elementor-20216 .elementor-element.elementor-element-3b54742{--grid-columns:1;}.elementor-20216 .elementor-element.elementor-element-c8ed475{--padding-top:4rem;--padding-bottom:4rem;--padding-left:1rem;--padding-right:1rem;}.elementor-20216 .elementor-element.elementor-element-f6361dc{width:var( --container-widget-width, 10rem );max-width:10rem;--container-widget-width:10rem;--container-widget-flex-grow:0;}.elementor-20216 .elementor-element.elementor-element-f6361dc img{width:100%;}.elementor-20216 .elementor-element.elementor-element-4173b36 .elementor-heading-title{font-size:1.6rem;}}/* Start custom CSS for shortcode, class: .elementor-element-a738fdb *//* 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 */