.elementor-4562 .elementor-element.elementor-element-d18daa8{--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-4562 .elementor-element.elementor-element-9097e6e{width:100%;max-width:100%;}body.elementor-page-4562:not(.elementor-motion-effects-element-type-background), body.elementor-page-4562 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111827;}/* Start custom CSS for container, class: .elementor-element-d18daa8 *//*******************************
 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>') 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 24"><g><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></g></svg>') center/contain no-repeat;
          mask:linear-gradient(#000 0 0) left/var(--w,0) 100%,url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 24"><g><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></g></svg>') 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 */