.elementor-4131 .elementor-element.elementor-element-e775c7b{--display:flex;--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;--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-4131 .elementor-element.elementor-element-e775c7b:not(.elementor-motion-effects-element-type-background), .elementor-4131 .elementor-element.elementor-element-e775c7b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111827;}.elementor-4131 .elementor-element.elementor-element-60d9ca5 > .elementor-widget-container{margin:0rem 0rem -2rem 0rem;padding:0rem 0rem -1rem 0rem;}.elementor-4131 .elementor-element.elementor-element-6bdee22{--display:flex;--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;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:-2rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:2rem;--padding-bottom:5rem;--padding-left:0rem;--padding-right:0rem;}.elementor-4131 .elementor-element.elementor-element-6bdee22:not(.elementor-motion-effects-element-type-background), .elementor-4131 .elementor-element.elementor-element-6bdee22 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111827;}.elementor-4131 .elementor-element.elementor-element-77674776{--display:flex;--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-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-toggle-wrapper{text-align:left;}.rtl .elementor-4131 .elementor-element.elementor-element-f364e5d.shopengine-filter--align-left .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-toggle-wrapper{text-align:right;}.rtl .elementor-4131 .elementor-element.elementor-element-f364e5d.shopengine-filter--align-right .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-toggle-wrapper{text-align:left;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-content-wrapper{left:0;box-shadow:0px 70px 99px 0px rgba(0,0,0,0.08);}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group-content-wrapper{width:1140px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-product-filters-wrapper{grid-template-columns:repeat(1, 1fr);gap:15px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters h3.shopengine-product-filter-title{font-size:18px;font-weight:700;text-transform:uppercase;line-height:22px;letter-spacing:0.02px;color:#505255;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-price-reset,
.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-price-result,
.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .filter-input-group label{font-size:16px;font-weight:500;line-height:19px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters :is(.shopengine-filter-category-label, .shopengine-filter-color-label, .shopengine-filter-attribute-label,.shopengine-filter-stock-label,.shopengine-filter-onsale-label,.shopengine-filter-label-label,.shopengine-filter-shipping-label,.shopengine-filter-color-label){color:#505255;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters :is(.shopengine-filter-category-label, .shopengine-filter-color-label, .shopengine-filter-attribute-label,.shopengine-filter-stock-label,.shopengine-filter-onsale-label, .shopengine-collapse .shopengine-product-filter-title,.shopengine-filter-label-label,.shopengine-filter-shipping-label,.shopengine-filter-color-label):hover{color:#075FCB;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .filter-input-group,
.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-rating__labels button:not(:last-child){margin:10px 0;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-rating__labels--mark :is(span, i, svg, img){font-size:10px;width:10px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-checkbox-icon :is(span, i, svg, img){font-size:10px;width:10px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-rating__labels--mark{border-color:#BABABA !important;line-height:16px;width:16px;height:16px;transform:translateY( 1px);border-radius:0px 0px 0px 0px !important;margin-right:10px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-checkbox-icon{border-color:#BABABA !important;line-height:16px;width:16px;height:16px;transform:translateY( 1px);border-radius:0px 0px 0px 0px !important;margin-right:10px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .rating-label-triger.checked .shopengine-filter-rating__labels--mark{color:#ffffff;background:#CCCCCC;border-color:#CCCCCC !important;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters input:checked + label .shopengine-checkbox-icon{color:#ffffff;background:#CCCCCC;border-color:#CCCCCC !important;}.elementor-4131 .elementor-element.elementor-element-f364e5d .open .shopengine-collapse-icon{color:#CCCCCC !important;}.rtl .elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-rating__labels--mark{border-radius:0px 0px 0px 0px !important;margin-left:10px;margin-right:0;}.rtl .elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-checkbox-icon{border-radius:0px 0px 0px 0px !important;margin-left:10px;margin-right:0;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-style-icon{margin-right:10px;}.rtl .elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-style-icon{margin-left:10px;margin-right:0;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-toggle{font-size:16px;font-weight:600;line-height:18px;color:#101010;background-color:#fff;border-style:solid;border-width:2px 2px 2px 2px;border-color:#3a3a3a;padding:10px 20px 10px 20px;margin:0px 0px 16px 0px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-toggle:hover{color:#ffffff;background-color:#3a3a3a;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-toggle.active{color:#ffffff;background-color:#3a3a3a;}.rtl .elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-toggle{border-width:2px 2px 2px 2px;padding:10px 20px 10px 20px;margin:0px 0px 16px 0px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-content{background-color:#fff;padding:0px 30px 20px 0px;}.rtl .elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-content{padding:0px 0px 20px 30px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-filter-price .asRange:before{background-color:#F2F2F2;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-filter-price .asRange > .asRange-selected:before{background-color:#7F7F7F;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-filter-price .asRange > .asRange-pointer{color:#7F7F7F;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-filter-price-result{color:#505255;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-filter-price-btns{margin-bottom:5px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-filter-price-reset{color:#505255;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-rating__labels-star.active{color:#FEC42D;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-rating__labels-star :is(i, svg){margin:0 2px;font-size:11px;width:11px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-category .shopengine-filter-category-subcategories{padding:0px 0px 0px 24px !important;}.rtl .elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-category .shopengine-filter-category-subcategories{padding:0px 24px 0px 0px !important;}.elementor-4131 .elementor-element.elementor-element-58a2bab > .elementor-widget-container{margin:0rem 3rem 0rem 0rem;}.elementor-4131 .elementor-element.elementor-element-dfb8a43{--display:flex;}.elementor-4131 .elementor-element.elementor-element-3333f0b5{--display:flex;--padding-top:1rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-4131 .elementor-element.elementor-element-b6a731a{--display:flex;--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;--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4131 .elementor-element.elementor-element-4d24e8f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0rem;--padding-bottom:4rem;--padding-left:0rem;--padding-right:0rem;}.elementor-4131 .elementor-element.elementor-element-4d24e8f:not(.elementor-motion-effects-element-type-background), .elementor-4131 .elementor-element.elementor-element-4d24e8f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #374151 0%, #1E3A8AB3 91%);}.elementor-4131 .elementor-element.elementor-element-4d24e8f > .elementor-shape-bottom .elementor-shape-fill, .elementor-4131 .elementor-element.elementor-element-4d24e8f > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#111827;}.elementor-4131 .elementor-element.elementor-element-4d24e8f > .elementor-shape-bottom svg, .elementor-4131 .elementor-element.elementor-element-4d24e8f > .e-con-inner > .elementor-shape-bottom svg{height:28px;}.elementor-4131 .elementor-element.elementor-element-4d24e8f > .elementor-shape-bottom, .elementor-4131 .elementor-element.elementor-element-4d24e8f > .e-con-inner > .elementor-shape-bottom{z-index:2;pointer-events:none;}.elementor-4131 .elementor-element.elementor-element-d3c8502{--display:flex;--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;--margin-top:2rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;}.elementor-4131 .elementor-element.elementor-element-d3c8502.e-con{--align-self:center;}.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-4131 .elementor-element.elementor-element-d386909 > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;}.elementor-4131 .elementor-element.elementor-element-d386909.elementor-element{--align-self:center;}.elementor-4131 .elementor-element.elementor-element-d386909 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:2.1rem;font-weight:500;color:#F3F4F6;}.elementor-4131 .elementor-element.elementor-element-2afd1a5{--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;--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;}.elementor-4131 .elementor-element.elementor-element-87bff6f{--display:flex;--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;}.elementor-4131 .elementor-element.elementor-element-307e46a{--display:flex;--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;}.elementor-4131 .elementor-element.elementor-element-bc187fd{--display:flex;--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;}.elementor-4131 .elementor-element.elementor-element-5990369{--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:8rem;--padding-bottom:4rem;--padding-left:1rem;--padding-right:1rem;}.elementor-4131 .elementor-element.elementor-element-5990369:not(.elementor-motion-effects-element-type-background), .elementor-4131 .elementor-element.elementor-element-5990369 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111827;}.elementor-4131 .elementor-element.elementor-element-217c9c4{--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;border-style:solid;--border-style:solid;border-color:#1F2937;--border-color:#1F2937;--border-radius:8px 8px 8px 8px;--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;}.elementor-4131 .elementor-element.elementor-element-217c9c4:not(.elementor-motion-effects-element-type-background), .elementor-4131 .elementor-element.elementor-element-217c9c4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(56deg, #374151 38%, #10B98140 93%);}.elementor-4131 .elementor-element.elementor-element-e84ac72{--display:flex;}.elementor-4131 .elementor-element.elementor-element-9c24f59{--display:flex;}.elementor-4131 .elementor-element.elementor-element-9c24f59.e-con{--align-self:center;}.elementor-4131 .elementor-element.elementor-element-e96dab8{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0rem;--padding-bottom:6rem;--padding-left:0rem;--padding-right:0rem;}.elementor-4131 .elementor-element.elementor-element-2dbb801{--display:flex;--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-4131 .elementor-element.elementor-element-3c8c5a0{--display:flex;--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;--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-4131 .elementor-element.elementor-element-f2bb22e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body.elementor-page-4131:not(.elementor-motion-effects-element-type-background), body.elementor-page-4131 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111827;}@media(max-width:767px){.elementor-4131 .elementor-element.elementor-element-60d9ca5 > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group-content-wrapper{width:300px;}.elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-content{padding:23px 23px 23px 23px;}.rtl .elementor-4131 .elementor-element.elementor-element-f364e5d .shopengine-product-filters .shopengine-filter-group .shopengine-filter-group-content{padding:23px 23px 23px 23px;}.elementor-4131 .elementor-element.elementor-element-dfb8a43{--margin-top:-2rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;}}@media(min-width:768px){.elementor-4131 .elementor-element.elementor-element-77674776{--width:25%;}.elementor-4131 .elementor-element.elementor-element-3333f0b5{--width:75%;}.elementor-4131 .elementor-element.elementor-element-2afd1a5{--width:100%;}.elementor-4131 .elementor-element.elementor-element-87bff6f{--width:33.3%;}.elementor-4131 .elementor-element.elementor-element-307e46a{--width:33.3%;}.elementor-4131 .elementor-element.elementor-element-bc187fd{--width:33.3%;}.elementor-4131 .elementor-element.elementor-element-e84ac72{--width:50%;}.elementor-4131 .elementor-element.elementor-element-9c24f59{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-4131 .elementor-element.elementor-element-77674776{--width:35%;}.elementor-4131 .elementor-element.elementor-element-3333f0b5{--width:65%;}}/* Start custom CSS for container, class: .elementor-element-e775c7b *//* ===== KS Shop Hero (scoped, cleaned) ===== */
:root{
--ks-bg:#0E1724;
--ks-panel:#101B2B;
--ks-border:rgba(255,255,255,.08);
--ks-text:#F9FAFB;
--ks-dim:#D1D5DB;
--ks-blue:#3B82F6;
--ks-green:#10B981;
--ks-orange:#FF7A1A;
}
/* Hero: Hintergrund + NAHT-FIX (kein Border unten, Overlay überziehen) */
.ks-shop-hero{
position: relative;
isolation: isolate;
background: linear-gradient(180deg, #11203a 0%, #0E1724 100%);
color: var(--ks-text);
padding: clamp(28px, 6vw, 72px) clamp(16px, 3vw, 32px);
border-bottom: 0 !important; /* << Strich-Quelle entfernen */
overflow: hidden;
}
/* Overlay – nur Blau/Grün, zart – unten leicht überziehen gegen Haarlinie */
.ks-shop-hero::before{
content:"";
position:absolute;
inset:-1px -1px -2px -1px; /* << 1–2px nach unten überdecken */
background:
radial-gradient(1200px 400px at 10% 0%, rgba(59,130,246,.15), transparent 60%),
radial-gradient(900px 300px at 90% 10%, rgba(16,185,129,.14), transparent 60%);
background-repeat:no-repeat;
animation: ksGradientDrift 32s ease-in-out infinite alternate;
z-index:0;
}
.ks-shop-hero > *{ position:relative; z-index:1; }
@keyframes ksGradientDrift{
0% { background-position: 10% 0%, 90% 10%; }
50% { background-position: 12% 1%, 88% 11%; }
100% { background-position: 10% 0%, 90% 10%; }
}
/* Deko-Marke */
.ks-shop-hero .ks-hero-mark{
position:absolute; inset:auto -40px -40px auto;
width:clamp(120px,16vw,200px); height:auto;
color:#fff; opacity:.35; pointer-events:none; filter:blur(.2px);
}
/* Innerer Inhalt */
.ks-hero-inner{ max-width:1280px; margin:0 auto; }
/* Breadcrumb */
.ks-breadcrumb{
color:var(--ks-dim);
font-size:clamp(12px,.9vw,13px);
margin-bottom:8px; opacity:.9;
}
.ks-breadcrumb a{ color:var(--ks-dim); text-decoration:none; }
.ks-breadcrumb a:hover{ color:#fff; }
/* Heading + Sub */
.ks-hero-title{
font-size:clamp(28px,4.2vw,56px);
line-height:1.05; margin:0 0 6px; letter-spacing:.2px;
}
.ks-hero-sub{
font-size:clamp(14px,1.25vw,18px);
color:var(--ks-dim); margin:0 0 18px;
}
/* ===== Quick Chips / Kategorien ===== */
.ks-quick-nav{ display:flex; gap:8px; flex-wrap:wrap; }
/* Chips (ohne Hover-Pill, nur leichte Schriftänderung) */
.ks-chip{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:8px 14px; border-radius:999px;
font-weight:700; font-size:14px; color:#fff; text-decoration:none;
border:1px solid var(--ks-border); background:rgba(255,255,255,.04);
transition: color .18s ease; cursor:default;
}
.ks-chip:hover{ color:rgba(249,250,251,.85); }
/* Varianten */
.ks-chip--windows{
background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.4);
box-shadow:0 0 12px rgba(59,130,246,.28);
}
.ks-chip--office{
background:rgba(255,122,26,.12); border-color:rgba(255,122,26,.4);
box-shadow:0 0 12px rgba(255,122,26,.28);
}
.ks-chip--bundles{
background:rgba(17,24,39,.85); border-color:rgba(59,130,246,.38);
box-shadow:0 0 12px rgba(59,130,246,.28), 0 0 18px rgba(255,122,26,.22);
}
/* ===== USP-Box (Trust Bar) – full bleed ===== */
.ks-trust{
/* bricht bewusst aus .ks-hero-inner aus */
width:100vw; max-width:100vw;
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
margin-top:24px;
background:var(--ks-panel);
border-top:1px solid var(--ks-border);
border-bottom:1px solid var(--ks-border);
border-radius:0;
overflow:hidden;
padding:0;
}
/* USP-Grid (boxed durch Padding) */
.ks-trust-inner{
width:100%;
padding:16px clamp(16px,3vw,32px);
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(8px,1.6vw,20px);
box-sizing:border-box;
}
.ks-trust-item{
display:flex; align-items:center; gap:10px;
color:var(--ks-text); font-weight:700; font-size:clamp(12px,1vw,14px);
background:rgba(255,255,255,.03);
border:1px solid var(--ks-border); border-radius:10px; padding:12px 14px;
}
.ks-trust-item svg{
width:18px; height:18px; flex:0 0 18px;
fill:var(--ks-green);
filter:drop-shadow(0 0 6px rgba(16,185,129,.15));
}
/* ===== Filterleiste (unter USPs, full bleed mit Innenpadding) ===== */
.ks-filterbar{
display:flex; justify-content:space-between; align-items:center;
padding:12px clamp(16px,3vw,32px);
border-top:1px solid var(--ks-border); /* trennt USPs von Filter */
border-bottom:0; /* keine zweite Linie nach unten */
background:var(--ks-panel);
width:100%; box-sizing:border-box;
}
.ks-filterbar-inner{
max-width:1280px; margin:0 auto;
display:flex; align-items:center; justify-content:space-between;
gap:clamp(12px,2vw,24px); width:100%;
}
.ks-ah-count{ display:flex; align-items:baseline; gap:6px; color:var(--ks-text); }
.ks-ah-count__num{ font-weight:800; font-size:clamp(16px,1.4vw,18px); }
.ks-ah-count__label{ font-size:clamp(13px,.95vw,14px); font-weight:600; color:var(--ks-dim); }
.ks-select{ position:relative; display:inline-flex; align-items:center; }
.ks-select__control{
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background:rgba(255,255,255,.03);
border:1px solid var(--ks-border); color:var(--ks-text);
font-weight:700; font-size:13.5px; padding:8px 34px 8px 12px; border-radius:10px; outline:none;
}
.ks-select__control:focus{ box-shadow:0 0 0 3px rgba(59,130,246,.25); }
.ks-select__icon{ position:absolute; right:10px; color:var(--ks-dim); font-size:12px; pointer-events:none; }
/* ===== Responsive ===== */
@media (max-width:980px){
.ks-trust-inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
.ks-filterbar-inner{ flex-direction:column; align-items:stretch; }
}
@media (max-width:560px){
.ks-trust-inner{ grid-template-columns:1fr; }
}
/* ===== Hardening: entferne evtl. Shape-Divider/Top-Border darunter ===== */
.ks-shop-hero .elementor-shape-bottom,
.ks-shop-hero .elementor-shape-divider,
.elementor-shape-divider-bottom{ display:none !important; }
.ks-shop-hero + .elementor-section,
.ks-shop-hero + section,
.ks-shop-hero + div{ border-top:0 !important; box-shadow:none !important; }
/* === KS Hero – Hairline-Killer (APPEND ONLY) === */
/* 1) Keine Linie unten an der USP-Box */
.ks-shop-hero .ks-trust{
border-bottom: 0 !important;
}
/* 2) Trennlinie nur zwischen USPs und Filterleiste (oben am Filter) */
.ks-shop-hero .ks-filterbar{
border-top: 1px solid var(--ks-border) !important;
border-bottom: 0 !important;
}
/* 3) Hero selbst: keine Bottom-Border, Overlay minimal überziehen */
.ks-shop-hero{
border-bottom: 0 !important;
}
.ks-shop-hero::before{
inset: -1px -1px -2px -1px !important; /* unten 1–2px überdeckt Naht */
}
/* 4) Sicherheits-Maske: 2px Streifen in Hintergrundfarbe über die Naht legen */
.ks-shop-hero::after{
content:"";
position:absolute;
left:0; right:0; bottom:-1px;
height:2px;
background: var(--ks-bg); /* gleiche Farbe wie Seitenhintergrund */
pointer-events:none;
z-index: 2; /* über dem ::before-Overlay */
}
/* 5) Falls die NACHFOLGENDE Section eine top-border/divider hat – aus */
.ks-shop-hero + .elementor-section,
.ks-shop-hero + section,
.ks-shop-hero + div{
border-top: 0 !important;
box-shadow: none !important;
}
.ks-shop-hero + *::before,
.ks-shop-hero + *::after{
content: none !important;
}
/* 6) Elementor-Shape-Divider sicher abschalten */
.ks-shop-hero .elementor-shape-bottom,
.ks-shop-hero .elementor-shape-divider,
.elementor-shape-divider-bottom{
display: none !important;
}
/* ===== KS Shop Hero – Gradient nur oben, unten reine Grundfarbe ===== */
.ks-shop-hero{
position: relative;
isolation: isolate;
background-color: var(--ks-bg); /* unten bleibt deine Basisfarbe */
color: var(--ks-text);
padding: clamp(28px, 6vw, 72px) clamp(16px, 3vw, 32px);
overflow: hidden;
border-bottom: 0 !important; /* keine Linie */
}
/* Glow-/Radialflächen nur oben einblenden, nach unten weich ausfaden */
.ks-shop-hero::before{
content:"";
position:absolute;
left:-1px; right:-1px; top:-1px; bottom:-1px; /* 1px Überzug gegen Haarlinien */
/* nur die „Lichtflecken“, Basisfarbe kommt vom Section-Background */
background:
radial-gradient(1200px 400px at 10% 0%, rgba(59,130,246,.15), transparent 60%),
radial-gradient(900px 300px at 90% 10%, rgba(16,185,129,.14), transparent 60%);
background-repeat:no-repeat;
animation: ksGradientDrift 32s ease-in-out infinite alternate;
z-index:0;
/* sanftes Ausblenden nach unten → darunter liegt var(--ks-bg) */
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
}
.ks-shop-hero > *{ position:relative; z-index:1; }
/* (Deine bestehende Animation kann bleiben) */
@keyframes ksGradientDrift{
0% { background-position: 10% 0%, 90% 10%; }
50% { background-position: 12% 1%, 88% 11%; }
100% { background-position: 10% 0%, 90% 10%; }
}
/* Theme-/Alt-Sticky neutralisieren */
.ks-archiv-filter .ks-filterbar,
.ks-archiv-filter .ks-filterbar-inner{
position: static !important;
top: auto !important;
}
/* Platzhalter, Höhe wird per JS gesetzt */
.ks-archiv-filter .ks-filterbar-spacer{ height: 0 !important; }
/* Fixed-Zustand – nur wenn JS .ks-filterbar--fixed setzt */
.ks-archiv-filter .ks-filterbar.ks-filterbar--fixed{
position: fixed !important;
top: var(--ks-sticky-top, 0);
z-index: 100; /* ausreichend hoch, aber nicht über Modals */
box-shadow: 0 8px 24px rgba(0,0,0,.35);
backdrop-filter: saturate(1.05) blur(2px);
}
/* 1) Nur die Seiten-Filterleiste darf sticky sein (wir setzen data-sticky="side" nur dort per JS) */
.ks-filterbar:not([data-sticky="side"]) {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
z-index: auto !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
/* 2) Speziell im Hero/Header: Sortierleiste niemals sticky */
.ks-shop-hero .ks-filterbar,
.ks-hero-sortbar,
.ks-shop-hero .ks-hero-sortbar {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
z-index: auto !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
/* 3) Sicherheit: Der Fixed-Style gilt NUR innerhalb .ks-archiv-filter */
.ks-filterbar--fixed { position: static !important; } /* reset global */
.ks-archiv-filter .ks-filterbar.ks-filterbar--fixed { /* einzig erlaubter Fixed-Style */
position: fixed !important;
top: var(--ks-sticky-top, 0);
left: 0; right: 0;
width: 100%;
z-index: 1005;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
backdrop-filter: saturate(1.05) blur(2px);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-58a2bab *//* ==============================
KS24 – Filter UI (clean, compact)
Gilt NUR innerhalb .ks-archiv-filter
============================== */
/* Design-Tokens */
.ks-archiv-filter {
--ks-card:#0f1722;
--ks-soft:rgba(255,255,255,.08);
--ks-border:rgba(255,255,255,.10);
--ks-text:#F9FAFB;
--ks-dim:#D1D5DB;
--ks-accent:#FF7A00; /* Sterne */
--ks-green:#10B981; /* Checks */
--ks-blue:#3B82F6; /* Windows */
--ks-orange:#FF7A00; /* Office */
}
/* Karten-Container */
.ks-archiv-filter .ks-filter-card{
background:var(--ks-card);
border:1px solid var(--ks-soft);
border-radius:16px;
padding:14px;
margin:14px 0;
box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.ks-archiv-filter .ks-filter-title{
margin:0 0 10px;
color:var(--ks-text);
font-weight:700;
letter-spacing:.06em;
font-size:14px;
}
/* ========== Preisspanne (dein Slider bleibt wie ist) ========== */
.ks-archiv-filter .shopengine-filter-price-btns{ margin-top:10px !important; }
.ks-archiv-filter .shopengine-filter-price-result{ color:var(--ks-dim) !important; }
.ks-archiv-filter .shopengine-filter-price-reset{
background:rgba(40,64,120,.32) !important;
border:1px solid var(--ks-border) !important;
color:#e5edff !important;
border-radius:12px !important;
padding:8px 14px !important;
box-shadow:none !important;
transition:background .15s, border-color .15s, transform .15s !important;
}
.ks-archiv-filter .shopengine-filter-price-reset:hover{
background:rgba(72,112,200,.38) !important;
border-color:rgba(255,255,255,.18) !important;
transform:translateY(-1px);
}
/* ========== Bewertungen (Sterne) ========== */
.ks-archiv-filter .ks-rating-group{
display:flex; flex-direction:column; gap:8px;
margin:0; padding:0; border:0;
}
.ks-archiv-filter .ks-rating-row{
display:flex; align-items:center; gap:10px;
padding:10px 12px;
border-radius:12px;
background:#101826;
border:1px solid rgba(255,255,255,.06);
cursor:pointer; user-select:none;
transition:background .15s, border-color .15s, transform .12s;
}
.ks-archiv-filter .ks-rating-row:hover{
background:#0e1622; border-color:rgba(255,255,255,.12);
transform:translateY(-1px);
}
/* Input unsichtbar – kein eigener Glow */
.ks-archiv-filter .ks-rating-row > input{ position:absolute; left:-9999px; }
/* Sterne (Inline-SVGs) */
.ks-archiv-filter .ks-stars{ display:inline-flex; gap:6px; margin-left:2px; }
.ks-archiv-filter .ks-stars .star{
width:18px; height:18px;
fill:none; stroke:#65758b; stroke-width:1.6;
}
.ks-archiv-filter .ks-stars .star.is-on{
fill:var(--ks-accent);
stroke:#ffb469;
}
.ks-archiv-filter .ks-stars.is-all .star{ fill:none; stroke:#6b7280; }
.ks-archiv-filter .ks-rating-label{ color:var(--ks-dim); font-size:14px; }
.ks-archiv-filter .ks-rating-row > input:checked ~ .ks-rating-label{
color:#ffe1b0; font-weight:600;
}
/* Reset-Button unter Bewertungen */
.ks-archiv-filter .ks-reset{
margin-top:10px;
display:inline-flex; align-items:center; justify-content:center;
padding:8px 12px; border-radius:10px;
background:#121a26; color:#e5edff;
border:1px solid var(--ks-border);
box-shadow:none;
transition:transform .15s, border-color .15s, background .15s;
}
.ks-archiv-filter .ks-reset:hover{
transform:translateY(-1px);
background:#0f1722;
border-color:rgba(255,255,255,.18);
box-shadow:0 10px 22px rgba(0,0,0,.35);
}
/* ========== Checkboxes (nur SVG-Tick) ========== */
.ks-archiv-filter .ks-check{
display:flex; align-items:center; gap:10px;
padding:10px 12px; margin:8px 0;
border-radius:12px; background:#101826;
border:1px solid rgba(255,255,255,.06);
cursor:pointer; user-select:none;
transition:background .15s, border-color .15s;
}
.ks-archiv-filter .ks-check:hover{
background:#0e1622; border-color:rgba(255,255,255,.12);
}
/* native Checkbox neutralisieren */
.ks-archiv-filter .ks-check > input[type="checkbox"]{
position:absolute; left:-9999px; opacity:0; pointer-events:none;
-webkit-appearance:none; appearance:none; accent-color: initial;
}
/* Box */
.ks-archiv-filter .ks-check > .ks-checkmark{
display:inline-flex; align-items:center; justify-content:center;
width:22px; height:22px; border-radius:7px;
background:#0b1320; border:2px solid #2b3442;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
transition:border-color .18s, background .18s, box-shadow .18s;
}
/* nur euer SVG verwenden (Border-Hack sicher aus) */
.ks-archiv-filter .ks-check > .ks-checkmark::after{ content:none !important; }
.ks-archiv-filter .ks-check .tick{
width:16px; height:12px; opacity:0; transform:scale(.9);
transition:opacity .14s ease, transform .14s ease;
}
/* Checked-State */
.ks-archiv-filter .ks-check > input[type="checkbox"]:checked + .ks-checkmark{
background:#0d1b28; border-color:var(--ks-green);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 6px rgba(16,185,129,.10);
}
.ks-archiv-filter .ks-check > input[type="checkbox"]:checked + .ks-checkmark .tick{
opacity:1; transform:scale(1);
}
.ks-archiv-filter .ks-check-label{ color:#E5E7EB; font-size:14px; line-height:1.25; }
/* ========== Kategorien – ruckelfrei, sharp, Glow wie Startseite ========== */
.ks-archiv-filter .ks-cat-list{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column; gap:10px;
}
.ks-archiv-filter .ks-cat-item{ margin:0; }
/* Grundtile: fester Outline, keine Bewegung */
.ks-archiv-filter .ks-cat-tile{
position:relative; display:block; text-decoration:none; color:inherit;
border-radius:12px; overflow:hidden;
outline:1px solid rgba(255,255,255,.08);
background:#0b1320;
}
/* Bild + Caption (scharf, ohne Filter) */
.ks-archiv-filter .ks-cat-figure{
display:grid; grid-template-columns:56px 1fr;
align-items:center; gap:10px; padding:8px; margin:0;
}
.ks-archiv-filter .ks-cat-img{
width:56px; height:56px; border-radius:10px;
object-fit:cover; display:block; background:#111827;
filter:none !important; -webkit-filter:none !important; transform:none !important;
}
.ks-archiv-filter .ks-cat-caption{
color:#e7edf9; font-weight:600; font-size:14px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0;
}
/* Glow-Ring ruckelfrei über ::after (nur 1px Ring, kein Shadow/Transform) */
.ks-archiv-filter .ks-cat-tile::after{
content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
opacity:0; border:1px solid transparent;
transition: opacity .12s linear, border-color .12s linear;
}
/* Windows = Blau */
.ks-archiv-filter .ks-cat-tile[href*="/windows/"]:hover::after,
.ks-archiv-filter .ks-cat-tile[href*="/windows/"].is-active::after{
opacity:1; border-color:var(--ks-blue);
}
/* Office = Orange */
.ks-archiv-filter .ks-cat-tile[href*="/office/"]:hover::after,
.ks-archiv-filter .ks-cat-tile[href*="/office/"].is-active::after{
opacity:1; border-color:var(--ks-orange);
}
/* Bundles = Gradient-Ring ohne Ruckeln */
.ks-archiv-filter .ks-cat-tile[href*="/bundles/"]::after{
content:"";
position:absolute;
inset:0;
border-radius:12px;
pointer-events:none;
border:1px solid transparent;
background:
linear-gradient(#0b1320, #0b1320) padding-box,
linear-gradient(90deg, var(--ks-blue), var(--ks-orange)) border-box;
opacity:0;
transition: opacity .12s linear;
}
.ks-archiv-filter .ks-cat-tile[href*="/bundles/"]:hover::after,
.ks-archiv-filter .ks-cat-tile[href*="/bundles/"].is-active::after{
opacity:1;
}
/* Fokus-Outline (ohne Bewegung) */
.ks-archiv-filter .ks-cat-tile:focus-visible{
outline:2px solid rgba(148,163,184,.6);
outline-offset:2px;
}
/* Mobile kompakter */
@media (max-width:580px){
.ks-archiv-filter .ks-cat-figure{ grid-template-columns:48px 1fr; }
.ks-archiv-filter .ks-cat-img{ width:48px; height:48px; border-radius:8px; }
}
/* Altes ShopEngine-Widget sicher ausblenden */
.ks-back-archiv .elementor-widget-shopengine-product-filters,
.ks-back-archiv .shopengine-product-filters{ display:none !important; }
/* ==============================
KS24 – Responsive Polish (append)
============================== */
/* 1) Fluid Typo & Spacing in Karten */
.ks-archiv-filter .ks-filter-card{
padding: clamp(12px, 2.2vw, 14px);
}
.ks-archiv-filter .ks-filter-title{
font-size: clamp(13px, 1.2vw, 14px);
}
/* 2) Touch Targets vergrößern (Rating/Checkbox-Zeilen) */
.ks-archiv-filter .ks-rating-row,
.ks-archiv-filter .ks-check{
min-height: 44px; /* Apple/Material Guideline */
}
/* 3) Kleine Screens: Stars & Thumbs etwas kleiner */
@media (max-width: 480px){
.ks-archiv-filter .ks-stars .star{ width:16px; height:16px; }
.ks-archiv-filter .ks-cat-figure{ grid-template-columns:52px 1fr; }
.ks-archiv-filter .ks-cat-img{ width:52px; height:52px; }
}
@media (max-width: 360px){
.ks-archiv-filter .ks-stars .star{ width:15px; height:15px; }
.ks-archiv-filter .ks-cat-figure{ grid-template-columns:46px 1fr; gap:8px; }
.ks-archiv-filter .ks-cat-img{ width:46px; height:46px; border-radius:7px; }
}
/* 4) Hover auf Touch-Geräten entschärfen (kein visuelles „Zappeln“) */
@media (hover: none){
.ks-archiv-filter .ks-cat-tile { /* bleibt ruhig */ }
.ks-archiv-filter .ks-cat-tile:hover::after{ opacity: 0; }
.ks-archiv-filter .ks-cat-tile.is-active::after{ opacity: 1; }
}
/* 5) Barrierefreiheit: Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce){
.ks-archiv-filter *{
transition: none !important;
animation: none !important;
}
}
/* 6) Lange Labels umbrechen statt überlaufen (engere Phones) */
@media (max-width: 420px){
.ks-archiv-filter .ks-check-label,
.ks-archiv-filter .ks-rating-label{
white-space: normal;
}
}
/* 7) Schutz gegen Layout-Shift durch System-Scrollbars (Safari/Win) */
.ks-archiv-filter { scrollbar-gutter: stable both-edges; }
/* ==============================
KS Filterbar – JS-gesteuertes Sticky (final)
============================== */
/* A) GANZE FILTERSPALTE NICHT sticky halten */
.ks-archiv-filter{
position: static !important; /* neutralisiert evtl. altes sticky */
align-self: auto !important;
height: auto;
}
/* B) Theme-/Alt-Sticky an der Filterbar sicher neutralisieren */
.ks-filterbar,
.ks-filterbar-inner{
position: static !important;
top: auto !important;
}
/* C) Normale (nicht sticky) Darstellung */
.ks-filterbar{
z-index: 12;
}
/* D) Platzhalter – wird per JS erstellt, bleibt 0 bis fixed aktiv */
.ks-filterbar-spacer{ height: 0 !important; }
/* E) Sticky-Zustand – NUR wenn JS .ks-filterbar--fixed setzt */
.ks-filterbar--fixed{
position: fixed !important;
top: var(--ks-sticky-top, 0);
left: 0;
right: 0;
width: 100%;
z-index: 1005;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
backdrop-filter: saturate(1.05) blur(2px);
}
/* Optional: Header-Offset
:root{ --ks-sticky-top: 72px; }
*/
/* ==============================
KS24 – Sticky Logik NUR für die linke Filterspalte
============================== */
/* Default: normaler Flow */
.ks-archiv-filter {
position: static;
top: auto;
z-index: 12;
}
/* Platzhalter – wird per JS daneben eingefügt */
.ks-archiv-filter-spacer { height: 0 !important; }
/* Sticky-Zustand: JS setzt .is-fixed */
.ks-archiv-filter.is-fixed {
position: fixed !important;
top: var(--ks-sticky-top, 0);
left: 0; /* genaue Werte (left/width) kommen von JS */
width: auto;
z-index: 30; /* über Content, aber unter Header/Menüs */
box-shadow: 0 8px 24px rgba(0,0,0,.25);
backdrop-filter: saturate(1.05) blur(2px);
}
/* Bundles = Gradient-Ring ohne Inhalte zu überdecken */
.ks-archiv-filter .ks-cat-tile[href*="/bundles/"]::after{
content:"";
position:absolute;
inset:0;
border-radius:12px;
pointer-events:none;
opacity:0;
/* Ring per Border-Box Gradient */
border:2px solid transparent;
background:
linear-gradient(90deg, var(--ks-blue), var(--ks-orange)) border-box;
-webkit-mask:
linear-gradient(#000 0 0) padding-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition:opacity .15s linear;
}
/* Hover/Active: nur den Ring einblenden, Inhalte bleiben sichtbar */
.ks-archiv-filter .ks-cat-tile[href*="/bundles/"]:hover::after,
.ks-archiv-filter .ks-cat-tile[href*="/bundles/"].is-active::after{
opacity:1;
}
/* ==============================
KS24 – Mobile Filter Button + Overlay/Sheet
============================== */
/* Farben fallbacken, falls außerhalb .ks-archiv-filter verwendet */
:root{
--ks-card:#0f1722;
--ks-soft:rgba(255,255,255,.08);
--ks-border:rgba(255,255,255,.10);
--ks-text:#F9FAFB;
--ks-dim:#D1D5DB;
--ks-accent:#FF7A00;
--ks-green:#10B981;
}
/* ---- Trigger-Button über dem Grid ---- */
.ks-filter-toggle{
display:none; /* nur mobil zeigen (s. Media Query unten) */
width:100%;
margin:0 0 12px 0;
padding:12px 14px;
border-radius:12px;
border:1px solid var(--ks-border);
background:linear-gradient(180deg, #0e1622, #0b1320);
color:#e7edf9;
font-weight:600;
letter-spacing:.02em;
box-shadow:0 6px 18px rgba(0,0,0,.35);
cursor:pointer;
transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .2s ease;
}
.ks-filter-toggle:hover{
transform:translateY(-1px);
border-color:rgba(255,255,255,.16);
box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.ks-filter-toggle:active{ transform:translateY(0); }
.ks-filter-toggle:focus-visible{
outline:2px solid rgba(148,163,184,.6);
outline-offset:2px;
}
/* ---- Overlay / Dialog ---- */
.ks-filter-dialog{
position:fixed;
inset:0;
z-index:10050; /* über Header/Menus */
display:grid;
grid-template-rows: 1fr; /* für Centering-Fallback */
background:rgba(0,0,0,.45);
-webkit-backdrop-filter: blur(3px) saturate(1.05);
backdrop-filter: blur(3px) saturate(1.05);
opacity:0;
visibility:hidden;
transition: opacity .18s ease, visibility .18s ease;
}
/* Sichtbar, wenn nicht hidden (JS toggelt [hidden]) */
.ks-filter-dialog:not([hidden]){
opacity:1; visibility:visible;
}
/* ---- Sheet (von unten) ---- */
.ks-filter-sheet{
position:absolute;
left:0; right:0; bottom:0;
max-height:92vh;
background:var(--ks-card);
border-top-left-radius:18px;
border-top-right-radius:18px;
box-shadow:0 -20px 40px rgba(0,0,0,.45);
border-top:1px solid var(--ks-soft);
transform: translateY(10%);
opacity:.98;
transition: transform .22s cubic-bezier(.2,.8,.2,1);
display:flex; flex-direction:column;
}
.ks-filter-dialog:not([hidden]) .ks-filter-sheet{
transform: translateY(0);
}
/* Sheet: Header / Body / Footer */
.ks-filter-sheet__head{
display:flex; align-items:center; justify-content:space-between;
padding:14px 16px 10px;
border-bottom:1px solid var(--ks-soft);
}
.ks-filter-sheet__head h2{
margin:0; font-size:16px; color:#fff; letter-spacing:.04em;
}
.ks-filter-close{
inline-size:38px; block-size:38px;
border-radius:10px;
border:1px solid var(--ks-border);
background:#0b1320; color:#e7edf9;
display:inline-flex; align-items:center; justify-content:center;
cursor:pointer;
}
.ks-filter-sheet__body{
overflow:auto;
padding:10px 12px 4px;
/* die echte Sidebar wird hier hinein verschoben (JS) */
}
.ks-filter-sheet__foot{
display:flex; gap:10px;
padding:10px 12px 12px;
border-top:1px solid var(--ks-soft);
background:linear-gradient(180deg, rgba(11,19,32,.95), rgba(9,15,26,.98));
}
/* Footer-Buttons */
.ks-filter-apply,
.ks-filter-reset{
flex:1 1 0;
padding:12px 14px;
border-radius:12px;
font-weight:700;
letter-spacing:.02em;
cursor:pointer;
border:1px solid var(--ks-border);
transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .2s ease, color .2s ease;
}
.ks-filter-apply{
background:linear-gradient(180deg, #13324b, #0f2436);
color:#eaf4ff;
box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.ks-filter-apply:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.16); }
.ks-filter-reset{
background:#101826; color:#e5edff;
}
.ks-filter-reset:hover{ background:#0f1722; border-color:rgba(255,255,255,.16); }
/* Optional: Body-Scroll locken, wenn Overlay offen (per JS Klasse setzen) */
.ks-no-scroll{ overflow:hidden !important; }
/* ==============================
Sichtbarkeit nach Breakpoints
============================== */
/* Desktop: Button aus, Sidebar normal sichtbar */
@media (min-width: 992px){
.ks-filter-toggle{ display:none; }
.ks-filter-dialog{ display:none; } /* Sicherheit */
.ks-archiv-filter{ display:block; } /* normale Sidebar */
}
/* Mobile/Tablet: Button an, Sidebar standardmäßig aus (lebt im Sheet) */
@media (max-width: 991px){
.ks-filter-toggle{ display:block; }
.ks-archiv-filter{
display:none; /* wird via JS ins Overlay gemountet */
margin:0;
}
/* Im Sheet gerenderte Karten behalten dein Styling */
.ks-filter-sheet .ks-archiv-filter{
display:block;
}
/* Etwas kompakter im Sheet */
.ks-filter-sheet .ks-filter-card{ margin:12px 0; }
}
/* Feinheiten: bessere Scrollleisten im Sheet (optional) */
.ks-filter-sheet__body::-webkit-scrollbar{
width:10px;
}
.ks-filter-sheet__body::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.08);
border-radius:8px;
border:2px solid rgba(0,0,0,0);
background-clip: padding-box;
}
/* ==============================
KS24 – Mobile Fix: Sidebar ausblenden + Button sichtbar
============================== */
@media (max-width: 991px){
/* Sidebar auf Mobile vollständig verstecken */
.ks-archiv-filter{
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
position: absolute !important;
pointer-events: none !important;
}
/* Button klar sichtbar über dem Grid */
.ks-filter-toggle{
display: block !important;
position: relative;
z-index: 9999; /* über Theme-Elementen */
}
/* Falls Elementor oder Container-Overflow: sicherstellen */
.elementor-widget-container:has(.ks-filter-toggle){
overflow: visible !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77674776 *//* ===========================
KS24 – ShopEngine Preis-Slider (clean)
Scope: nur in der Filter-Spalte
(DEIN BLOCK – unverändert)
=========================== */
.ks-archiv-filter .shopengine-filter-price-slider.asRange{
position: relative !important;
height: 22px !important; /* Gesamthöhe der Slider-Zeile */
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* (1) Alle Original-Tracks & Ränder killen */
.ks-archiv-filter .asRange-bar,
.ks-archiv-filter .asRange-selected,
.ks-archiv-filter .asRange-pointer,
.ks-archiv-filter .asRange-pointer::before,
.ks-archiv-filter .asRange-pointer::after{
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* (2) dezente Baseline mittig (ersetzt die graue/weiße Linie) */
.ks-archiv-filter .shopengine-filter-price-slider.asRange::before{
content:"";
position:absolute;
left:0; right:0;
top:50%;
height:2px; /* dünne Linie */
transform: translateY(-50%);
background: rgba(255,255,255,.14); /* subtil, nicht zu hell */
border-radius: 2px;
z-index: 0;
}
/* (3) Ausgewählter Bereich als Gradient – sauber mittig über der Baseline */
.ks-archiv-filter .asRange-selected{
position:absolute !important;
top:50% !important;
height:6px !important; /* etwas dicker als die Baseline */
transform: translateY(-50%) !important;
background: linear-gradient(90deg,#10b981,#3b82f6) !important;
border-radius: 6px !important;
z-index: 1 !important;
}
/* (4) Griffe (Handles) – kompakt mit Glow, ohne zusätzliche Linien */
.ks-archiv-filter .asRange-pointer{
position:absolute !important;
width:18px !important;
height:18px !important;
top:50% !important;
transform: translate(-50%,-50%) !important;
border-radius: 50% !important;
background:#0b1620 !important; /* dunkler Kern */
border:2px solid #d1fae5 !important; /* sanftes Mint */
box-shadow:
0 0 0 3px rgba(16,185,129,.22),
0 4px 10px rgba(0,0,0,.35) !important; /* Glow + Tiefe */
z-index: 2 !important;
cursor: pointer !important;
}
/* Fokus/Hover-State: leicht stärkerer Glow */
.ks-archiv-filter .asRange-pointer:hover,
.ks-archiv-filter .asRange-pointer:focus{
box-shadow:
0 0 0 4px rgba(16,185,129,.28),
0 6px 14px rgba(0,0,0,.45) !important;
}
/* (5) Sicherstellen, dass keine Rest-Linien vom Theme durchscheinen */
.ks-archiv-filter .shopengine-filter-price-slider.asRange,
.ks-archiv-filter .shopengine-filter-price-slider.asRange *{
background-clip: padding-box !important;
}
/* (6) Spacing & Typo für die Preis-Ausgabe und Reset-Button */
.ks-archiv-filter .shopengine-filter-price-btns{
display:flex !important;
align-items:center !important;
gap:12px !important;
margin-top:10px !important;
}
.ks-archiv-filter .shopengine-filter-price-result{
color:#cfd6e4 !important;
font-weight:600 !important;
}
.ks-archiv-filter .shopengine-filter-price-reset{
background:rgba(30,58,138,.35) !important; /* dunkles Blau */
color:#e5edff !important;
padding:8px 12px !important;
border-radius:10px !important;
border:1px solid rgba(255,255,255,.08) !important;
transition:transform .15s ease, box-shadow .15s ease !important;
}
.ks-archiv-filter .shopengine-filter-price-reset:hover{
transform: translateY(-1px) !important;
box-shadow:0 12px 26px rgba(0,0,0,.35) !important;
}
/* (7) Card-Style für die gesamte Filter-Sektion (dunkel, ohne Weiß) */
.ks-archiv-filter .shopengine-product-filters,
.ks-archiv-filter .shopengine-filter-group-content{
background: #0f1722 !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:16px !important;
padding:16px !important;
box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;
}
/* (8) Überschrift / Labels */
.ks-archiv-filter .shopengine-product-filter-title{
color:#cfe6ff !important;
letter-spacing:.08em !important;
font-weight:700 !important;
margin: 2px 0 10px !important;
}
/* --- KS: Price range — show ONLY the gradient track --- */
.ks-archiv-filter .shopengine-filter-price-slider {
position: relative;
height: 14px; /* working area height */
}
/* 1) Nuke the default/base track & any borders/shadows */
.ks-archiv-filter .shopengine-filter-price-slider .asRange-bar {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
height: 0 !important; /* remove visible line */
}
.ks-archiv-filter .shopengine-filter-price-slider .asRange-bar::before,
.ks-archiv-filter .shopengine-filter-price-slider .asRange-bar::after,
.ks-archiv-filter .shopengine-filter-price-slider .asRange-selected::before,
.ks-archiv-filter .shopengine-filter-price-slider .asRange-selected::after {
content: none !important; /* in case the plugin draws a hairline */
}
/* 2) The ONLY visible track: the selected range */
.ks-archiv-filter .shopengine-filter-price-slider .asRange-selected {
position: absolute;
left: 0; right: 0; /* asRange will still set left/width; that’s ok */
top: 50%;
transform: translateY(-50%);
height: 6px; /* thickness of the track */
border-radius: 999px;
background: linear-gradient(90deg,#10B981,#3B82F6) !important;
border: 0 !important;
box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset; /* subtle crisp edge */
}
/* 3) Handles */
.ks-archiv-filter .shopengine-filter-price-slider .asRange-pointer {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 18px; height: 18px;
border-radius: 50%;
background: #0F172A; /* dark center */
border: 2px solid #E8FDF7; /* light ring */
box-shadow: 0 0 0 3px rgba(16,185,129,.25); /* soft mint glow */
}
.ks-archiv-filter .shopengine-filter-price-slider .asRange-pointer:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(59,130,246,.28); /* blue focus */
}
/* 4) Remove any theme line behind the slider (some themes add it on the wrapper) */
.ks-archiv-filter .shopengine-filter-price .asRange,
.ks-archiv-filter .shopengine-filter-price-slider {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* =======================================================
ZUSÄTZLICHE REGELN für die restliche Filter-Sektion
(keine Überschneidung mit dem Slider-Block)
======================================================= */
/* Wrapper (weißes Widget-Hintergrund entfernen) */
.ks-archiv-filter .elementor-widget-container,
.ks-archiv-filter .shopengine-widget {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Abstand zwischen Filter-Gruppen */
.ks-archiv-filter .shopengine-filter-single { margin-bottom: 14px !important; }
.ks-archiv-filter .shopengine-filter-single:last-child { margin-bottom: 0 !important; }
/* Rating-Zeilen (Card) */
.ks-archiv-filter .shopengine-filter-rating__labels .rating-label-triger {
width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 12px !important;
background: #121a25 !important;
border: 1px solid rgba(255,255,255,.06) !important;
border-radius: 12px !important;
transition: transform .12s ease, border-color .12s ease, background .12s ease !important;
}
.ks-archiv-filter .shopengine-filter-rating__labels .rating-label-triger:hover {
transform: translateY(-1px) !important;
border-color: rgba(255,255,255,.12) !important;
background: #152031 !important;
}
/* Sterne: aktiv orange, inaktiv gedimmt */
.ks-archiv-filter .shopengine-filter-rating__labels .shopengine-filter-rating__labels-star.active i {
color: #FF7A00 !important;
}
.ks-archiv-filter .shopengine-filter-rating__labels .shopengine-filter-rating__labels-star.inactive i {
color: rgba(203,213,225,.35) !important;
}
/* Checkboxen & Kategorien (Links) */
.ks-archiv-filter .filter-input-group {
display:flex !important; align-items:center !important; gap:10px !important;
padding: 8px 8px !important;
border-radius: 10px !important;
}
.ks-archiv-filter .filter-input-group:hover {
background:#0e1520 !important;
}
.ks-archiv-filter input[type="checkbox"]{
width:18px !important; height:18px !important;
appearance:none !important; -webkit-appearance:none !important;
border:1.5px solid rgba(255,255,255,.25) !important;
border-radius:4px !important; background:transparent !important;
position:relative !important; display:inline-block !important;
}
.ks-archiv-filter input[type="checkbox"]:checked{
border-color:#10B981 !important; background:#10B981 !important;
}
.ks-archiv-filter input[type="checkbox"]:checked::after{
content:""; position:absolute; inset:0;
margin:auto; width:10px; height:10px; border-radius:2px;
background:#082e25 !important; /* dunkler Check-Kern */
}
/* Kategorie-Toggles (Pfeile) */
.ks-archiv-filter .shopengine-filter-category-toggle span,
.ks-archiv-filter .shopengine-filter-subcategory-toggle span {
display:inline-block !important;
width:10px !important; height:10px !important;
border-right:2px solid rgba(207,230,255,.8) !important;
border-bottom:2px solid rgba(207,230,255,.8) !important;
transform: rotate(-45deg) !important;
transition: transform .15s ease, border-color .15s ease !important;
}
.ks-archiv-filter .shopengine-filter-category-toggle[aria-expanded="true"] span,
.ks-archiv-filter .shopengine-filter-subcategory-toggle[aria-expanded="true"] span{
transform: rotate(45deg) !important;
border-color:#60A5FA !important;
}
/* Typo in der Liste */
.ks-archiv-filter .shopengine-filter-category-label,
.ks-archiv-filter .shopengine-filter-onsale-label {
color:#E5E7EB !important; text-decoration:none !important;
font-weight:500 !important;
}
/* ===========================
KS24 – Archiv-Filter (ohne Slider)
=========================== */
/* Widget/Box – dunkle Card, kein Weiß */
.ks-archiv-filter .shopengine-product-filters,
.ks-archiv-filter .shopengine-filter-group-content {
background:#0f1722 !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:16px !important;
padding:18px !important;
box-shadow:0 14px 34px rgba(0,0,0,.35) !important;
color:#cfd6e4 !important;
}
/* Abschnittstitel */
.ks-archiv-filter .shopengine-product-filter-title {
margin: 16px 0 10px !important;
color:#cfe6ff !important;
font-weight:700 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
/* ---------- Bewertungs-Buttons (Sterne) ---------- */
.ks-archiv-filter .shopengine-filter-rating__labels {
display:grid !important;
gap:10px !important;
}
.ks-archiv-filter .shopengine-filter-rating__labels > button {
display:flex !important;
align-items:center !important;
gap:12px !important;
width:100% !important;
padding:10px 12px !important;
background:#121a26 !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:12px !important;
transition:transform .12s ease, border-color .12s ease !important;
}
.ks-archiv-filter .shopengine-filter-rating__labels > button:hover {
transform:translateY(-1px);
border-color:rgba(255,255,255,.16) !important;
}
.ks-archiv-filter .shopengine-filter-rating__labels--mark { display:none !important; } /* Checkbox-Icon ausblenden */
/* Sterne einfärben */
.ks-archiv-filter .shopengine-filter-rating__labels__stars .fas.fa-star {
margin-right:4px;
font-size:14px;
}
.ks-archiv-filter .shopengine-filter-rating__labels-star.active .fas.fa-star { color:#ff7a00 !important; } /* Orange */
.ks-archiv-filter .shopengine-filter-rating__labels-star.inactive .fas.fa-star { color:#334155 !important; } /* gedimmt */
/* ---------- Kategorien / Checkbox-Listen ---------- */
/* jedes Listenelement als kleine Card */
.ks-archiv-filter .shopengine-category-filter-list li,
.ks-archiv-filter .shopengine-filter .filter-input-group {
background:#121a26 !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:10px !important;
padding:10px 12px !important;
margin:8px 0 !important;
}
/* Pfeile/Toggles komplett entfernen */
.ks-archiv-filter .shopengine-filter-category-toggle,
.ks-archiv-filter .shopengine-filter-subcategory-toggle {
display:none !important;
}
/* Label/Link-Farben */
.ks-archiv-filter .shopengine-filter-category-label,
.ks-archiv-filter .shopengine-filter-onsale-label {
color:#cfd6e4 !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
cursor:pointer !important;
}
/* ---------- Custom Checkbox (kein Weiß) ---------- */
.ks-archiv-filter input[type="checkbox"] {
appearance:none !important;
-webkit-appearance:none !important;
width:18px; height:18px;
border-radius:4px;
margin:0 6px 0 0 !important;
display:inline-grid; place-items:center;
background:#0f1722;
border:1px solid rgba(255,255,255,.18);
box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);
transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.ks-archiv-filter input[type="checkbox"]:hover {
border-color:rgba(255,255,255,.32);
}
.ks-archiv-filter input[type="checkbox"]::after {
content:"";
width:10px; height:10px;
border-radius:2px;
transform:scale(0);
transition:transform .12s ease;
background:linear-gradient(90deg,#10b981,#3b82f6); /* KS-Mint → Blau */
}
.ks-archiv-filter input[type="checkbox"]:checked::after {
transform:scale(1);
}
/* ---------- „Angebote“ (On Sale etc.) ---------- */
.ks-archiv-filter .shopengine-filter .filter-input-group + .filter-input-group {
margin-top:8px !important;
}
/* ---------- Reihen/Chips um die UI ruhiger zu machen ---------- */
.ks-archiv-filter .shopengine-filter-single {
margin-bottom:18px !important;
}
.ks-archiv-filter .shopengine-filter-single:last-child {
margin-bottom:6px !important;
}
/* ---------- Hilfsfarben & Platzierung ---------- */
.ks-archiv-filter p,
.ks-archiv-filter .shopengine-filter-price-result {
color:#a7b4c6 !important;
}
/* Mobile spacing */
@media (max-width: 560px){
.ks-archiv-filter .shopengine-product-filters,
.ks-archiv-filter .shopengine-filter-group-content {
padding:14px !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-732b063 *//* ==============================
KS24 – Load More Button
============================== */
.ks-loadmore-wrap {
text-align: center;
margin: 32px 0;
}
.ks-loadmore-btn {
background: #1a2538;
border: 1px solid rgba(255,255,255,.15);
color: #F9FAFB;
font-size: 15px;
font-weight: 600;
padding: 12px 28px;
border-radius: 10px;
cursor: pointer;
transition: all .2s ease;
}
.ks-loadmore-btn:hover {
background: #24344e;
border-color: rgba(255,255,255,.25);
transform: translateY(-2px);
}
.ks-loadmore-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3333f0b5 *//*******************************
KS24 – Product Archive (responsive, polished, Woo icons)
*******************************/
/* ===== Design Tokens (mit fluiden Werten) ===== */
:root{
--ks-card-bg:#0b1420;
--ks-card-border:rgba(255,255,255,.10);
--ks-card-radius:16px;
/* Media-Höhe fluid: min 200px, ideal 24vw, max 300px */
--ks-media-h:clamp(200px, 24vw, 300px);
--ks-media-pad:clamp(10px, 1.2vw, 14px);
--ks-text:#ffffff;
--ks-muted:#c9d1db;
--ks-orange:#ff7a00;
--ks-green:#18b572;
/* Icons fluid: min 30px, ideal 3vw, max 36px */
--ks-icon-size:clamp(30px, 3vw, 36px);
--ks-icon-gap:clamp(10px, 1.2vw, 14px);
--ks-icon-ring:rgba(255,255,255,.14);
--ks-icon-bg:rgba(17,24,39,.65);
--ks-icon-bg-hover:rgba(17,24,39,.82);
/* Cart banner */
--ks-blue-1:#2F6FFF;
--ks-blue-2:#1E5AFF;
--ks-blue-3:#163EBE;
--ks-cart-h:clamp(50px, 6vw, 56px);
--ks-card-pad:clamp(12px, 1.4vw, 16px);
/* Typo */
--ks-title-size:clamp(16px, 1.35vw, 19px);
--ks-price-size:clamp(16px, 1.2vw, 18px);
--ks-icon-font:clamp(16px, 1.1vw, 18px);
}
/* ===== Grid (4/3/2/1) ===== */
.ks24-archive__grid{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:clamp(14px, 1.6vw, 22px) !important;
align-items:stretch !important;
width:100% !important;
margin:0 auto !important;
box-sizing:border-box !important;
}
@media (max-width:1200px){
.ks24-archive__grid{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:900px){
.ks24-archive__grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:520px){
.ks24-archive__grid{ grid-template-columns:1fr !important; }
}
/* ===== Card Shell ===== */
.ks24-card{
position:relative;
background:var(--ks-card-bg);
border:1px solid var(--ks-card-border);
border-radius:var(--ks-card-radius);
color:var(--ks-text);
box-shadow:0 10px 24px rgba(0,0,0,.32);
overflow:hidden;
padding:var(--ks-card-pad);
padding-bottom:calc(var(--ks-card-pad) + var(--ks-cart-h));
display:flex; flex-direction:column;
}
/* ===== MEDIA – immer quadratisch, Bild zentriert ===== */
.ks24-card__media{
display:block;
aspect-ratio: 1 / 1; /* quadratisch auf allen modernen Browsern */
height:auto; /* Höhe kommt über das Verhältnis */
padding: var(--ks-media-pad);
background:#111a26;
border:0; border-radius:0;
margin: calc(-1 * var(--ks-card-pad)) calc(-1 * var(--ks-card-pad)) 0;
box-sizing: border-box;
}
/* Bild füllt die Box proportional, zentriert */
.ks24-card__img{
width:100%; height:100%;
display:block;
object-fit: contain;
object-position: center; /* vorher top → jetzt mittig */
background:transparent; border:0; border-radius:8px;
opacity:0; transition:opacity .25s ease;
}
.ks24-card__img.is-loaded{ opacity:1; }
/* ---------- Fallback für sehr alte Browser (ohne aspect-ratio) ---------- */
@supports not (aspect-ratio: 1 / 1){
.ks24-card__media{
position: relative;
padding: 0; /* Padding in Pseudo-Element verlagern */
background:#111a26;
}
.ks24-card__media::before{
content:"";
display:block;
padding-top:100%; /* Quadrat erzeugen */
background:#111a26;
}
.ks24-card__media > .ks24-card__img{
position:absolute;
inset: var(--ks-media-pad);
width: auto; height: auto;
max-width: calc(100% - 2*var(--ks-media-pad));
max-height: calc(100% - 2*var(--ks-media-pad));
margin:auto; /* in der Box zentrieren */
}
}
/* ===== Content ===== */
.ks24-card__content{ margin-top:14px; flex:1 1 auto; display:flex; flex-direction:column; }
.ks24-card__title{
margin:0 0 6px;
font-weight:800;
line-height:1.25;
font-size:var(--ks-title-size);
}
.ks24-card__title-link{ color:var(--ks-text); text-decoration:none; }
.ks24-card__title-link:hover{ opacity:.96; }
/* Rating */
.ks24-card__rating{
margin:2px 0 10px; color:var(--ks-muted);
display:inline-flex; align-items:center; gap:6px;
}
.ks24-stars{ position:relative; display:inline-grid; grid-auto-flow:column; gap:3px; }
.ks24-star{
width:16px; height:16px; background:currentColor; opacity:.25;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.ks24-stars__fill{
position:absolute; inset:0; width:0;
background:linear-gradient(90deg,#ff7a00 0 0) no-repeat;
-webkit-mask:linear-gradient(#000 0 0) left/var(--w,0) 100%,url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:linear-gradient(#000 0 0) left/var(--w,0) 100%,url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.ks24-card__rating .ks24-rating__count{ opacity:.7; }
/* ===== Price + Widgets ===== */
.ks24-card__meta-row{
display:flex; align-items:center; justify-content:space-between; gap:clamp(10px, 1.2vw, 14px);
}
.ks24-card__price{
display:flex; align-items:baseline; gap:6px;
font-weight:800; font-size:var(--ks-price-size); color:var(--ks-text);
}
/* ===== Widgets (Buttons) ===== */
.ks24-card__widgets{
display:inline-flex; align-items:center; gap:var(--ks-icon-gap); flex-wrap:nowrap;
}
.ks24-widget{
width:var(--ks-icon-size); height:var(--ks-icon-size);
display:grid; place-items:center;
border-radius:999px; text-decoration:none; outline:0;
color:var(--ks-orange);
background:var(--ks-icon-bg);
border:1px solid var(--ks-icon-ring);
box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
transition:transform .12s ease, background-color .15s linear, border-color .15s linear, color .15s linear;
}
.ks24-widget:hover{
background:var(--ks-icon-bg-hover);
border-color:rgba(255,255,255,.22);
color:var(--ks-green);
transform:translateY(-1px);
}
.ks24-widget:active{ transform:translateY(0); }
.ks24-widget:focus-visible{ box-shadow:0 0 0 3px rgba(37,99,235,.35); }
/* ===== ShopEngine Iconfont (Wishlist / QuickView / Compare) ===== */
.ks24-card__widgets i{
display:inline-block;
font-size:var(--ks-icon-font);
line-height:1;
color:currentColor !important;
background:none !important;
width:auto; height:auto;
}
.ks24-card__widgets i::before{
color:currentColor !important;
font-size:inherit;
line-height:inherit;
}
.ks24-card__widgets i.shopengine-icon-add_to_favourite_1,
.ks24-card__widgets i.shopengine-icon-quick_view_1,
.ks24-card__widgets i.shopengine-icon-product_compare_1{
font-family:"shopengine-icons","shopengine","se-icons",sans-serif !important;
font-style:normal; font-weight:normal;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* ==== Compare: Farbe & Rahmen wie die anderen, inkl. .badge-Varianten ==== */
.ks24-card__widgets .shopengine-comparison.badge{
background:transparent !important;
color:inherit !important;
border:0 !important;
box-shadow:none !important;
}
.ks24-card__widgets .ks24-widget.ks24-widget--compare,
.ks24-card__widgets .shopengine-comparison.badge{
/* gleiche “Pill”-Optik erzwingen */
width:var(--ks-icon-size); height:var(--ks-icon-size);
display:grid; place-items:center;
border-radius:999px;
background:var(--ks-icon-bg) !important;
border:1px solid var(--ks-icon-ring) !important;
box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
color:var(--ks-orange) !important;
}
.ks24-card__widgets .ks24-widget.ks24-widget--compare:hover,
.ks24-card__widgets .shopengine-comparison.badge:hover{
background:var(--ks-icon-bg-hover) !important;
border-color:rgba(255,255,255,.22) !important;
color:var(--ks-green) !important;
}
.ks24-card__widgets .ks24-widget.ks24-widget--compare i,
.ks24-card__widgets .ks24-widget.ks24-widget--compare i::before,
.ks24-card__widgets .shopengine-comparison.badge i,
.ks24-card__widgets .shopengine-comparison.badge i::before{
color:currentColor !important; /* orange/grün übernehmen */
}
/* ===== Cart Banner ===== */
.ks24-card__footer{ flex:0 0 auto; }
.ks24-btn--cart{
position:absolute; left:0; right:0; bottom:0;
display:grid; place-items:center;
height:var(--ks-cart-h);
padding:0 clamp(14px, 1.4vw, 18px);
color:#fff; font-weight:800; letter-spacing:.2px; text-decoration:none;
background-image:linear-gradient(180deg,var(--ks-blue-1) 0%, var(--ks-blue-2) 100%),
linear-gradient(120deg,rgba(255,255,255,.0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.0) 100%);
background-size:100% 100%, 220% 100%;
background-position:center, -120% 0;
border-top:1px solid rgba(255,255,255,.10);
border-radius:0 0 var(--ks-card-radius) var(--ks-card-radius);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
transition:background-position .35s ease, filter .15s ease, transform .08s ease;
}
.ks24-btn--cart:hover{ background-position:center, 120% 0; filter:brightness(1.02); }
.ks24-btn--cart:active{ transform:translateY(1px); }
/* ===== Safety / Resets ===== */
.ks24-archive, .ks24-archive *{ box-sizing:border-box; }
.ks24-card .overlay-add-to-cart, .ks24-card .overlay-add-to-cart *{
position:static !important; transform:none !important; opacity:1 !important; visibility:visible !important;
}
/* ===== Extra Responsiveness Tweaks ===== */
@media (max-width:420px){
:root{
--ks-title-size:clamp(15px, 4.2vw, 17px);
--ks-price-size:clamp(15px, 3.9vw, 17px);
}
.ks24-card__meta-row{ gap:10px; }
}
/* Große Bildschirme – etwas mehr Luft & höhere Media-Box */
@media (min-width:1600px){
:root{
--ks-media-h:clamp(260px, 22vw, 340px);
--ks-icon-size:clamp(34px, 2.2vw, 40px);
--ks-icon-font:clamp(18px, 1vw, 20px);
}
}
/* Motion-Preference respektieren */
@media (prefers-reduced-motion: reduce){
.ks24-card__img{ transition:none; }
.ks24-widget{ transition:none; }
.ks24-btn--cart{ transition:none; }
}
/* === KS – Archiv: Warenkorb-Button blau (Grid) === */
:root{
--ks-blue: #3b82f6; /* 500 */
--ks-blue-600: #2563eb; /* hover */
--ks-blue-700: #1d4ed8; /* active */
--ks-blue-ring: rgba(59,130,246,.32);
}
/* Basisstil – volle Breite im Card-Footer */
body .ks24-archive .ks24-card .ks24-btn--cart{
display:flex; align-items:center; justify-content:center;
width:100%; height:44px;
background:var(--ks-blue) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.12) !important;
border-radius:12px !important;
font-weight:700 !important;
text-decoration:none !important;
line-height:1 !important;
transition: background .18s ease, box-shadow .18s ease, transform .08s ease;
box-shadow:0 6px 16px rgba(0,0,0,.22);
}
/* Hover/Focus/Active */
body .ks24-archive .ks24-card .ks24-btn--cart:hover{
background:var(--ks-blue-600) !important;
box-shadow:0 0 0 3px var(--ks-blue-ring), 0 8px 20px rgba(0,0,0,.28);
color:#fff !important;
}
body .ks24-archive .ks24-card .ks24-btn--cart:active{
background:var(--ks-blue-700) !important;
transform: translateY(1px);
}
body .ks24-archive .ks24-card .ks24-btn--cart:focus-visible{
outline:0 !important;
box-shadow:0 0 0 3px var(--ks-blue-ring) !important;
}
/* Woo AJAX-Klassen beibehalten, aber im selben Look halten */
body .ks24-archive .ks24-card .ks24-btn--cart.add_to_cart_button{
background:var(--ks-blue) !important; color:#fff !important;
}
body .ks24-archive .ks24-card .ks24-btn--cart.ajax_add_to_cart.loading{
opacity:.9; pointer-events:none;
}
body .ks24-archive .ks24-card .ks24-btn--cart.ajax_add_to_cart.loading::after{
/* Woo-Spinner übernimmt die Textfarbe – stellen sicher, dass er sichtbar ist */
filter: brightness(1.1);
}
/* Status „added“ gleich stylen */
body .ks24-archive .ks24-card .ks24-btn--cart.added{
background:var(--ks-blue-600) !important;
color:#fff !important;
}
/* Den von Woo nach dem Add eingefügten Zweitbutton (View Cart) im Grid ausblenden */
body .ks24-archive .ks24-card a.added_to_cart.wc-forward{
display:none !important;
}
/* Falls irgendein Theme-Button im Footer daneben auftaucht – hart neutralisieren */
body .ks24-archive .ks24-card .ks24-card__footer .button:not(.ks24-btn--cart){
display:none !important;
}
/* === KS24 – Warenkorb-Button: oben gerade, unten Kartenradius (final) === */
body .ks24-archive .ks24-card .ks24-card__footer > .ks24-btn.ks24-btn--cart{
position: absolute !important;
left: 0; right: 0; bottom: 0;
width: 100% !important;
height: var(--ks-cart-h) !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--ks-blue) !important;
color: #fff !important;
font-weight: 700 !important;
text-decoration: none !important;
border: none !important;
/* Rundungen hart zurücksetzen und nur unten aktivieren */
border-radius: 0 !important; /* alles auf 0 */
border-top-left-radius: 0 !important; /* oben gerade */
border-top-right-radius: 0 !important; /* oben gerade */
border-bottom-left-radius: var(--ks-card-radius) !important;
border-bottom-right-radius: var(--ks-card-radius) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
transition: background .18s ease, transform .08s ease;
}
body .ks24-archive .ks24-card .ks24-card__footer > .ks24-btn.ks24-btn--cart:hover{
background: var(--ks-blue-600) !important;
}
body .ks24-archive .ks24-card .ks24-card__footer > .ks24-btn.ks24-btn--cart:active{
background: var(--ks-blue-700) !important;
transform: translateY(1px);
}
body .ks24-archive .ks24-card .ks24-card__footer > .ks24-btn.ks24-btn--cart:focus-visible{
outline: 0 !important;
box-shadow: 0 0 0 3px var(--ks-blue-ring) !important;
}
/* ================================
KS24 – FINAL: TV/Ultra-Wide Fix
(kein abgeschnittenes rechtes Icon)
================================ */
/* 0) Safety: Flex-Kinder dürfen nicht überlaufen */
.ks24-card__price,
.ks24-card__widgets{ min-width: 0; }
.ks24-card__meta-row{ overflow: visible; }
/* 1) Ein einziger, responsiver Puffer NUR für den Content (nicht für die Media-Box oben) */
:root{
--ks-edge-safe: 0px; /* default: keine Einrückung auf normalen Screens */
}
@media (min-width: 1400px){
:root{ --ks-edge-safe: 12px; } /* TVs/FHD: etwas Luft rechts */
}
@media (min-width: 1800px){
:root{ --ks-edge-safe: 14px; } /* breiter */
}
@media (min-width: 2100px){
:root{ --ks-edge-safe: 16px; } /* ultra-wide */
}
/* Einrückung anwenden – betrifft nur Titel/Preis/Icons, NICHT das Bild */
.ks24-card__content{
padding-inline-end: var(--ks-edge-safe) !important;
box-sizing: border-box;
}
/* 2) Widgets auf großen Screens minimal kompakter + engerer Gap */
.ks24-card__widgets{
gap: clamp(8px, 0.8vw, 14px) !important; /* normal: wie gehabt, breit: enger */
margin-right: 0 !important;
flex-wrap: nowrap !important; /* niemals umbrechen */
}
@media (min-width: 1800px){
.ks24-card__widgets .ks24-widget{
width: calc(var(--ks-icon-size) - 2px) !important;
height: calc(var(--ks-icon-size) - 2px) !important;
}
}
@media (min-width: 2100px){
.ks24-card__widgets{
gap: 10px !important;
}
.ks24-card__widgets .ks24-widget{
width: calc(var(--ks-icon-size) - 4px) !important;
height: calc(var(--ks-icon-size) - 4px) !important;
}
}
/* 3) Keine weiteren rechten Paddings irgendwo anders
(verhindert kollidierende Regeln aus Themes/Snippets) */
.ks24-card{ padding-right: var(--ks-card-pad) !important; } /* Karte bleibt „clean“ */
.ks24-card__meta-row{ padding-right: 0 !important; } /* Zeile selbst ohne Extra-Padding *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6bdee22 *//* ==== KS24 – ARCHIVE LAYOUT (robust with Elementor) ==== */
/* 1) Do NOT grid the section itself. Just pad it. */
.ks-back-archiv{
background:#111827;
padding:24px;
}
/* 2) Grid only the direct inner container of the section.
Elementor can be .e-con (Flexbox Container) or .elementor-container (older). */
.ks-back-archiv > .e-con,
.ks-back-archiv > .elementor-container{
display:grid;
grid-template-columns: 280px minmax(0,1fr);
gap:28px;
align-items:start;
}
/* 3) Make sure the two column containers can't collapse */
.ks-back-archiv > .e-con > .ks-archiv-filter,
.ks-back-archiv > .elementor-container > .ks-archiv-filter,
.ks-back-archiv > .e-con > .ks-produkt-archiv,
.ks-back-archiv > .elementor-container > .ks-produkt-archiv{
min-width:0; /* critical: prevents the "thin column" bug */
overflow:visible; /* don’t clip children */
}
/* Left column sticky filter (optional) */
.ks-archiv-filter{
position: sticky;
top: 110px; /* adjust to sit below your header/trustbar */
align-self:start;
}
/* Responsive: single column on tablet/phone */
@media (max-width: 992px){
.ks-back-archiv > .e-con,
.ks-back-archiv > .elementor-container{
display:block; /* revert to normal flow */
}
.ks-archiv-filter{ position:static; top:auto; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2afd1a5 *//* ============ KS STEPS – kompakte Badges ohne Lift Hover ============ */
.ks-steps{
--bg:#F6F7FB;
--card-top:#0F1B2D;
--card-btm:#0B1524;
--title:#FFFFFF;
--text:#D1D5DB;
--muted:#9AA3AD;
--accent:#FF7A00;
--shadow:0 10px 24px rgba(13,27,45,.22);
--shadow-hover:0 12px 26px rgba(13,27,45,.26);
--gap:18px;
--radius:14px;
--card-pad:16px 14px;
--min-h:160px;
--icon:54px;
--icon-svg:26px;
--title-size:15px;
--desc-size:12px;
--desc-width:20ch;
--line-w:4px;
--line-h:60%;
--line-top:20%;
}
/* Layout */
.ks-steps .elementor-container{
display:grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap:var(--gap);
align-items:stretch;
}
/* Karte */
.ks-step{
position:relative;
isolation:isolate;
min-height:var(--min-h);
padding:var(--card-pad);
border-radius:var(--radius);
background:linear-gradient(180deg, var(--card-top), var(--card-btm));
box-shadow:var(--shadow);
color:var(--text);
text-align:center;
overflow:hidden;
transition:box-shadow .25s ease, background .25s ease;
}
/* Orangene Linie */
.ks-step::after{
content:"";
position:absolute;
left:0; top:var(--line-top);
width:var(--line-w); height:var(--line-h);
background:var(--accent);
border-radius:2px;
z-index:1; pointer-events:none;
}
/* Icon-Kreis */
.ks-step .ks-icon{
position:relative; z-index:2;
width:var(--icon); height:var(--icon);
margin:4px auto 10px;
border-radius:50%;
display:grid; place-items:center;
color:#fff;
background:
radial-gradient(calc(var(--icon) - 10px) calc(var(--icon) - 10px) at 50% 35%, rgba(255,255,255,.10), rgba(255,255,255,0)),
linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.15));
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.06),
0 5px 10px rgba(255,122,0,.15);
}
.ks-step .ks-icon svg{ width:var(--icon-svg); height:var(--icon-svg); }
/* Titel & Text */
.ks-step .ks-title{
margin:4px 0 4px;
font-weight:700;
font-size:var(--title-size);
color:var(--title);
}
.ks-step .ks-desc{
margin:0 auto;
max-width:var(--desc-width);
font-size:var(--desc-size);
line-height:1.4;
color:var(--text);
}
/* Hover nur mit Glow – kein Lift */
.ks-step:hover{ box-shadow:var(--shadow-hover); }
.ks-step:hover .ks-icon{
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 7px 14px rgba(255,122,0,.22),
0 0 0 3px rgba(255,122,0,.28);
}
/* Icon Bewegung */
@keyframes ks-bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
.ks-step .ks-icon{ animation:ks-bob 4s ease-in-out infinite; }
/* Responsive */
@media (max-width:1024px){
.ks-steps .elementor-container{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:680px){
.ks-steps .elementor-container{ grid-template-columns: 1fr; }
.ks-steps{ --line-h:48%; --line-top:26%; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e84ac72 *//* ===== KS24 – FAQ (solo, harmonisiert zum Newsletter) ===== */
/* Sektion als dunkle, ruhige Karte – passend zum Newsletter */
.ks-faq-wrap{
max-width:1200px; width:100%;
margin:40px auto;
padding:clamp(24px,5vw,32px);
color:#E8EEF7;
/* Panel-Optik */
background: linear-gradient(180deg,#0E1724,#0D1B2A);
border-radius:16px;
box-shadow:0 8px 26px rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.06);
}
/* Header */
.ks-faq-head h2{
margin:0 0 8px; font-weight:800;
font-size:clamp(22px,2.8vw,32px); line-height:1.15;
color:#FF7A00;
}
.ks-faq-head .sub{
margin:0 0 22px; color:#D1D5DB;
font-size:clamp(14px,1.6vw,16px); line-height:1.5;
}
/* Karten (Details) */
.ks-faq details{
background:#1F2937; /* ruhig, dunkel */
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
margin-bottom:18px;
overflow:hidden;
transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ks-faq details:hover{
border-color:rgba(30,58,138,.45); /* Markenblau */
box-shadow:0 10px 24px rgba(0,0,0,.28);
transform:translateY(-1px);
}
.ks-faq details[open]{
border-color:rgba(30,58,138,.55);
}
/* Summary (Fragezeile) */
.ks-faq summary{
display:flex; align-items:center; gap:10px;
padding:16px 16px; cursor:pointer; list-style:none;
font-weight:700; color:#FF7A00;
font-size:clamp(15px,1.6vw,16px); line-height:1.3;
position:relative;
}
.ks-faq summary::-webkit-details-marker{ display:none; }
/* Chevron */
.ks-faq summary::after{
content:"\276F";
margin-left:auto; font-size:16px; color:#E8EEF7;
transform:rotate(0deg);
transition:transform .2s ease;
opacity:.9;
}
.ks-faq details[open] summary::after{ transform:rotate(90deg); }
/* Antwort-Text + zarte Trennlinie oben */
.ks-faq p{
margin:0;
padding:12px 16px 16px 16px;
color:#D1D5DB;
font-size:clamp(14px,1.5vw,15px);
line-height:1.55;
border-top:1px solid rgba(255,255,255,.06);
}
/* Tastaturfokus – gut sichtbar, aber dezent */
.ks-faq summary:focus-visible{
outline:3px solid rgba(30,58,138,.45);
outline-offset:2px; border-radius:8px;
}
/* Motion-Reduce */
@media (prefers-reduced-motion: reduce){
.ks-faq summary::after{ transition:none; }
.ks-faq details{ transition:none; }
}
/* Responsive Feinschliff */
@media (max-width: 1200px){
.ks-faq-wrap{ margin:32px auto; }
}
@media (max-width: 600px){
.ks-faq-wrap{ padding:clamp(20px,6vw,28px); }
.ks-faq summary{ padding:14px; }
.ks-faq p{ padding:10px 14px 14px 14px; }
}
/* Text umbrechen, nichts darf aus den Karten „auslaufen“ */
.ks-faq summary, .ks-faq p{
word-break: break-word;
overflow-wrap: anywhere;
}
/* Chevron passt sich der Schriftgröße an */
.ks-faq summary::after{
font-size: 1em;
}
/* Very-small phones (≤360px) – etwas kompaktere Innenabstände */
@media (max-width: 360px){
.ks-faq summary{ padding: 12px; }
.ks-faq p{ padding: 8px 12px 12px 12px; }
}
/* Optional: auf Mobile etwas weniger Schatten für ruhigere Optik */
@media (max-width: 600px){
.ks-faq details{ box-shadow: 0 6px 16px rgba(0,0,0,.25); }
}
/* Touch-Ziel sicherstellen (falls Fragen sehr kurz sind) */
.ks-faq summary{
min-height: 44px; /* Apple HIG / WCAG Touch target */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9c24f59 *//* =========================================================
KS24 – Newsletter Sektion (cleanes Formular, Icon-Halo)
========================================================= */
/* --- ÄUSSERE SEKTION --- */
.ks-newsletter-wrap{
max-width: 760px;
width: 100%;
margin: clamp(36px,6vw,56px) auto;
padding: clamp(28px,5.5vw,44px) clamp(22px,4vw,32px);
border-radius: 22px;
background: linear-gradient(180deg,#111827 0%, #0D1B2A 100%);
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 12px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
color: #E8EEF7;
text-align: center;
}
/* --- HEAD: Icon + Texte --- */
.ks-news-head{ margin-bottom: clamp(16px,3.5vw,22px); }
.ks-news-head .news-icon{
width: 92px; height: 92px; margin: 0 auto clamp(12px,2.5vw,16px);
position: relative; display: grid; place-items: center;
}
.ks-news-head .news-icon::before{
content:""; position:absolute; inset:0; border-radius:50%;
border:1px solid rgba(255,255,255,.08);
background:
radial-gradient(ellipse at 50% 45%, rgba(16,185,129,.20), transparent 60%),
linear-gradient(180deg,#0E1724 0%, #0B1420 100%);
box-shadow: 0 0 0 6px rgba(16,185,129,.12), 0 14px 36px rgba(16,185,129,.22);
}
.ks-news-head .news-icon img{ width:66px; height:auto; display:block; z-index:1; }
.ks-news-head h2{
margin:0 0 8px; font-weight:800;
font-size:clamp(24px,3.6vw,40px);
line-height:1.15; color:#fff;
}
.ks-news-head .sub{
margin:0 0 clamp(16px,3vw,18px);
color:#D1D5DB; font-size:clamp(14px,2.2vw,18px); line-height:1.5;
}
/* --- INNERER CONTAINER --- */
.ks-newsletter{ background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; }
/* --- FORM-ROW (Input + Button) --- */
.nl-form .nl-row{
display:flex; align-items:center; justify-content:center;
gap:12px; margin-bottom:14px;
}
/* Eingabefeld – Desktop-Basis (56px wie bisher) */
.nl-form input[type="email"],
.nl-form #nl-email{
flex:1 1 380px;
height:56px;
border-radius:12px;
border:1px solid #10B981;
background:transparent;
color:#E8EEF7;
padding:0 14px;
font-size:16px;
line-height:1;
outline:none;
box-shadow:none !important;
transition:border-color .18s ease, box-shadow .18s ease;
-webkit-appearance:none; appearance:none;
box-sizing:border-box;
}
.nl-form input[type="email"]::placeholder{ color:rgba(232,238,247,.55); }
.nl-form input[type="email"]:focus{
border-color:#10B981;
box-shadow:0 0 0 3px rgba(16,185,129,.28);
}
/* Button – Desktop-Basis (56px) */
.nl-form .btn.nl-btn{
height:56px; padding:0 22px;
border-radius:12px;
background:#1E3A8A;
color:#fff;
border:none;
font-weight:700; font-size:15px;
display:inline-flex; align-items:center; justify-content:center;
transition:background .2s ease, transform .2s ease;
box-sizing:border-box;
}
.nl-form .btn.nl-btn:hover{ background:#10B981; transform:translateY(-1px); }
.nl-form .btn.nl-btn::after{ content:none !important; }
/* Consent */
.nl-consent{
display:inline-flex; align-items:flex-start; gap:10px;
margin-top:8px; font-size:13px; color:#D1D5DB; text-align:left;
}
.nl-consent input[type="checkbox"]{
width:14px; height:14px; margin-top:2px; accent-color:#10B981;
}
.nl-consent a{ color:#10B981; text-decoration:none; }
.nl-consent a:hover{ text-decoration:underline; }
/* --- RESPONSIVE --- */
/* ≤1024px (Tablet & Mobile): Feld wirklich normalisieren (48px) */
@media (max-width:1024px){
/* nur dein Feld, mit maximaler Spezifität */
section.ks-newsletter-wrap form.nl-form input#nl-email{
height:auto !important;
min-height:48px !important;
max-height:48px !important; /* hart deckeln */
line-height: normal !important;
padding-block:10px !important; /* vertikal steuern */
padding-inline:14px !important;
font-size:16px !important; /* iOS kein Zoom */
box-sizing:border-box !important;
-webkit-appearance:none; appearance:none;
}
/* Button passend, aber nicht größer */
section.ks-newsletter-wrap form.nl-form .btn.nl-btn{
height:auto !important;
min-height:48px !important;
max-height:48px !important;
line-height: normal !important;
padding-block:10px !important;
padding-inline:18px !important;
}
.nl-form .nl-row{ gap:10px; }
}
/* ≤640px: einspaltig, volle Breite */
@media (max-width:640px){
.nl-form .nl-row{ flex-direction:column; }
#nl-email,
.nl-form input[type="email"],
.nl-form .btn.nl-btn{ width:100%; }
}
/* ≤380px: extra kompakt (44px) */
@media (max-width:380px){
section.ks-newsletter-wrap form.nl-form input#nl-email{
min-height:44px !important;
max-height:44px !important;
padding-block:8px !important;
}
section.ks-newsletter-wrap form.nl-form .btn.nl-btn{
min-height:44px !important;
max-height:44px !important;
padding-block:8px !important;
}
.ks-newsletter-wrap{
margin:28px auto;
padding:22px 18px;
}
.nl-consent{ font-size:12.5px; }
}
/* --- Feinheiten --- */
.nl-form input[type="email"]{ min-width:0; }
.ks-newsletter-wrap .nl-form input[type="email"],
.ks-newsletter-wrap .nl-form .btn.nl-btn{ box-sizing:border-box; }
.nl-form input[type="email"],
.nl-form .btn.nl-btn{ min-height:44px; } /* WCAG touch target */
/* Reduce Motion */
@media (prefers-reduced-motion:reduce){
.nl-form .btn.nl-btn{ transition:background .2s ease; }
.nl-form .btn.nl-btn:hover{ transform:none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-081c515 *//* = KS24 Blog-Teaser (Dark, responsive, robust) = */
.ks-blogteaser{
--bg:; --card:#0f1722; --soft:rgba(255,255,255,.08);
--text:#F9FAFB; --muted:#CBD5E1; --ok:#10B981; --border:rgba(255,255,255,.12);
--btn:#3B82F6; --btnText:#fff; --btnHoverFilter:brightness(1.06);
background:var(--bg);
padding:clamp(28px,5vw,56px) 16px;
border-top:1px solid rgba(255,255,255,.06);
}
.ks-blogteaser__inner{ max-width:980px; margin:0 auto; }
/* Head */
.ks-blogteaser__head{
text-align:center;
margin:0 auto clamp(18px,3.2vw,28px);
max-width:760px;
}
.ks-blogteaser h2{
color:var(--text);
font-size:clamp(22px,2.6vw,30px);
line-height:1.2;
margin:0 0 8px;
}
.ks-blogteaser__sub{
color:var(--muted);
margin:0 0 14px;
font-size:clamp(14px,1.2vw,15px);
}
/* CTA Button (übersteuert Theme-Buttons zuverlässig) */
.ks-blogteaser .ks-btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
background:var(--btn); color:var(--btnText); text-decoration:none;
border:0; border-radius:12px; padding:12px 18px; font-weight:700;
transition:transform .12s ease, filter .12s ease, box-shadow .15s ease;
box-shadow:0 10px 22px rgba(0,0,0,.35);
outline:none;
}
.ks-blogteaser .ks-btn:hover{ transform:translateY(-1px); filter:var(--btnHoverFilter); }
.ks-blogteaser .ks-btn:focus-visible{
box-shadow:0 0 0 3px rgba(16,185,129,.18), 0 10px 22px rgba(0,0,0,.35);
}
.ks-blogteaser .ks-btn:active{ transform:translateY(0); }
/* Grid */
.ks-bloggrid{
display:grid; gap:clamp(14px,1.8vw,18px);
grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width: 980px){ .ks-bloggrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px){ .ks-bloggrid{ grid-template-columns:1fr; } }
/* Card */
.ks-blogcard{
background:var(--card);
border:1px solid var(--soft);
border-radius:14px;
overflow:hidden;
height:100%;
display:flex; flex-direction:column;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ks-blogcard:hover{
transform:translateY(-2px);
border-color:var(--border);
box-shadow:0 12px 28px rgba(0,0,0,.38);
}
/* Link um die ganze Karte */
.ks-blogcard__link{
display:flex; flex-direction:column; flex:1 1 auto;
color:inherit; text-decoration:none;
outline:none;
}
.ks-blogcard__link:focus-visible{
box-shadow:inset 0 0 0 2px rgba(16,185,129,.6);
}
/* Bild – robust, auch ohne Thumbnail hübsch */
.ks-blogcard__img{
width:100%; aspect-ratio:16/9;
object-fit:cover; display:block; background:#0e1624;
}
/* Fallback, falls Theme ![]()
entfernt – leeres DIV kann so aussehen */
.ks-blogcard__img--ph{
width:100%; aspect-ratio:16/9; background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
/* Textbereich */
.ks-blogcard__title{
color:var(--text);
font-size:clamp(16px,1.5vw,18px);
line-height:1.3;
margin:12px 14px 6px;
font-weight:700;
}
.ks-blogcard__excerpt{
color:var(--muted);
font-size:14px; line-height:1.55;
margin:0 14px 16px;
}
/* Links im Excerpt (falls vorhanden) – dezent */
.ks-blogcard__excerpt a{
color:#93C5FD; text-underline-offset:2px;
}
.ks-blogcard__excerpt a:hover{ filter:brightness(1.1); }
/* Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce){
.ks-blogcard, .ks-blogteaser .ks-btn{ transition:none !important; }
}
/* Sicherstellen, dass Theme-Stile nicht „greifen“ */
.ks-blogteaser .ks-blogcard img{ background:transparent !important; border:none !important; }
.ks-blogteaser .ks-blogcard a{ text-decoration:none !important; }
/* Extra: Abstand zur vorherigen Sektion, wenn direkt unter FAQ eingebunden */
.ks-faq + .ks-blogteaser{ margin-top: clamp(12px, 3vw, 24px); }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f2bb22e *//* Container */
.ks-seo-text {
--ks-seo-bg: #0b1320;
--ks-seo-fg: #e8edf7;
--ks-seo-dim:#aab3c2;
--ks-seo-accent:#3B82F6;
--ks-seo-soft: rgba(255,255,255,.08);
--ks-seo-soft2: rgba(255,255,255,.12);
background: var(--ks-seo-bg);
color: var(--ks-seo-fg);
padding: clamp(24px, 5vw, 48px) clamp(16px, 3vw, 32px);
border-top: 1px solid var(--ks-seo-soft);
}
.ks-seo-wrap {
max-width: 980px;
margin: 0 auto;
}
.ks-seo-text h2{
font-size: clamp(22px, 3.5vw, 34px);
line-height: 1.15;
margin: 0 0 12px;
}
.ks-seo-text h3{
font-size: clamp(18px, 2.5vw, 22px);
margin: 20px 0 8px;
}
.ks-seo-text p{
color: var(--ks-seo-fg);
opacity: .96;
line-height: 1.6;
margin: 0 0 12px;
}
.ks-seo-text ul{
margin: 0 0 12px 18px;
padding: 0;
}
.ks-seo-text li{ margin: 6px 0; }
.ks-seo-text a{
color: var(--ks-seo-accent);
text-decoration: none;
border-bottom: 1px dashed color-mix(in oklab, var(--ks-seo-accent) 60%, transparent);
}
.ks-seo-text a:hover{ opacity: .85; }
/* FAQ (details/summary) */
.ks-faq{
border: 1px solid var(--ks-seo-soft);
background: #0f1722;
border-radius: 12px;
margin: 12px 0;
transition: border-color .2s ease, background .2s ease;
}
.ks-faq[open]{ border-color: var(--ks-seo-soft2); }
.ks-faq-q{
list-style: none;
cursor: pointer;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
font-weight: 700;
color: var(--ks-seo-fg);
}
.ks-faq-q::-webkit-details-marker { display: none; }
/* Caret */
.ks-faq-q::after{
content: "▾";
font-size: 14px;
color: var(--ks-seo-dim);
transform: rotate(0deg);
transition: transform .2s ease, color .2s ease;
}
.ks-faq[open] .ks-faq-q::after{
transform: rotate(-180deg);
color: var(--ks-seo-accent);
}
/* Antwort */
.ks-faq-a{
padding: 0 14px 12px 14px;
color: var(--ks-seo-fg);
}
.ks-faq-a p{ margin: 0; color: var(--ks-seo-fg); opacity: .95; }
/* Abstände/Typo fein justieren */
.ks-seo-links { margin-top: 16px; }
/* Mobile */
@media (max-width: 560px){
.ks-faq-q{ padding: 12px; }
.ks-faq-a{ padding: 0 12px 12px 12px; }
}
/* 1. Lange URLs/Keywords umbrechen */
.ks-seo-text p, .ks-seo-text li {
word-break: break-word;
overflow-wrap: anywhere;
}
/* 2. Focus-State für Links (Barrierefreiheit) */
.ks-seo-text a:focus-visible {
outline: 2px solid var(--ks-seo-accent);
outline-offset: 3px;
}
/* 3. Motion-Reduce-Support (dezent bei FAQ-Icons) */
@media (prefers-reduced-motion: reduce){
.ks-faq-q::after { transition: none; }
.ks-faq { transition: none; }
}
/* 4. Sehr kleine Geräte (≤360px) */
@media (max-width: 360px){
.ks-seo-text { padding: 20px 14px; }
.ks-faq-q { font-size: 15px; }
}/* End custom CSS */
/* Start custom CSS *//* ===============================
KS24 – Mobile Filter Button + Overlay
=============================== */
/* --- 1. Der Button selbst --- */
.ks-filter-toggle {
display: none; /* nur mobil aktiv */
}
@media (max-width: 991px) {
.ks-filter-toggle {
display: block !important;
width: 100%;
margin: 16px 0;
padding: 14px 18px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
background: linear-gradient(180deg,#0f1722,#0b1320);
color: #fff;
font-weight: 600;
font-size: 15px;
text-align: center;
cursor: pointer;
transition: all .2s ease;
box-shadow: 0 6px 20px rgba(0,0,0,.35);
z-index: 90;
}
.ks-filter-toggle:hover {
background: linear-gradient(180deg,#162232,#0b1320);
border-color: rgba(255,255,255,.18);
transform: translateY(-1px);
}
}
/* --- 2. Overlay-Hintergrund --- */
.ks-filter-dialog {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(6px);
display: flex;
justify-content: flex-end;
align-items: stretch;
z-index: 10000;
}
/* Dialog initial versteckt */
.ks-filter-dialog[hidden] {
display: none !important;
}
/* --- 3. Das eigentliche Sheet --- */
.ks-filter-sheet {
background: #0b1320;
width: 86%;
max-width: 380px;
height: 100%;
box-shadow: -4px 0 20px rgba(0,0,0,.45);
display: flex;
flex-direction: column;
border-left: 1px solid rgba(255,255,255,.06);
animation: ksSlideIn .25s ease;
}
/* Slide-Animation */
@keyframes ksSlideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* --- 4. Kopfbereich --- */
.ks-filter-sheet__head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 18px;
border-bottom: 1px solid rgba(255,255,255,.08);
background: #0f1722;
}
.ks-filter-sheet__head h2 {
margin: 0;
font-size: 16px;
color: #fff;
font-weight: 600;
letter-spacing: .03em;
}
.ks-filter-close {
background: none;
border: none;
color: #fff;
font-size: 22px;
cursor: pointer;
line-height: 1;
transition: color .2s;
}
.ks-filter-close:hover { color: #ff7a00; }
/* --- 5. Inhalt (Mountpoint für Sidebar) --- */
.ks-filter-sheet__body {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.ks-filter-sheet__body::-webkit-scrollbar {
width: 6px;
}
.ks-filter-sheet__body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.15);
border-radius: 3px;
}
/* --- 6. Footer mit Buttons --- */
.ks-filter-sheet__foot {
display: flex;
gap: 10px;
padding: 14px 18px;
border-top: 1px solid rgba(255,255,255,.08);
background: #0f1722;
}
.ks-filter-apply,
.ks-filter-reset {
flex: 1;
padding: 10px 0;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
font-size: 14px;
}
/* Übernehmen = orange */
.ks-filter-apply {
background: #ff7a00;
color: #fff;
border: none;
}
.ks-filter-apply:hover {
background: #ff8c1a;
transform: translateY(-1px);
}
/* Zurücksetzen = neutral */
.ks-filter-reset {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
color: #d1d5db;
}
.ks-filter-reset:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.15);
transform: translateY(-1px);
}
/* --- 7. Nur Desktop: Overlay deaktivieren --- */
@media (min-width: 992px) {
.ks-filter-dialog { display: none !important; }
}
/* Wenn die Sidebar im Overlay steckt, nicht verstecken */
#ks-filter-dialog .ks-filter-sheet__body .ks-archiv-filter{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* ==============================
KS24 – Close-Button (Green, Flat)
============================== */
.ks-filter-close {
background: linear-gradient(180deg, #14c18f, #10b981);
color: #fff;
border: 1px solid var(--ks-border);
border-radius: 10px;
transition: background .2s ease, transform .15s ease;
}
.ks-filter-close:hover {
background: linear-gradient(180deg, #17d29c, #11c18c);
transform: translateY(-1px);
}
.ks-filter-close:active {
transform: translateY(0);
background: linear-gradient(180deg, #10b981, #0e9b6c);
}/* End custom CSS */