/* ==========================================================================
   KLASSIK COOL! – Events Frontend Styles (Elementor-Kit freundlich, CI-fix)
   Autor: Michael Spring – Marketing-Media.at
   ========================================================================== */

/* Farb-Variablen */
:root{
  --kce-primary: var(--e-global-color-primary, #233563);
  --kce-deep:    var(--e-global-color-text,    #29332F);
  --kce-primary-900:#1d2c56;

  --kce-text:#29332F;
  --kce-muted:#475467;
  --kce-border:#E5E7EB;
  --kce-bg:#FFFFFF;
  --kce-surface:#F8FAFC;

  --kce-radius:14px;
  --kce-shadow:0 10px 30px rgba(16,24,40,.08), 0 2px 8px rgba(16,24,40,.06);
  --kce-focus:3px solid var(--kce-primary);
  --kce-focus-offset:2px;
}

/* ------------------------- Wrapper & Grid ------------------------- */
.kce-wrapper{ margin:1rem 0; }
.kce-grid{ display:grid; gap:1rem; }
.kce-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.kce-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kce-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kce-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kce-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kce-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1024px){
  .kce-cols-4,.kce-cols-5,.kce-cols-6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .kce-cols-2,.kce-cols-3,.kce-cols-4,.kce-cols-5,.kce-cols-6{grid-template-columns:repeat(1,minmax(0,1fr))}
}

.kce-empty{
  grid-column:1/-1; padding:2rem; text-align:center;
  color:#667085; background:#fafafa; border:1px dashed var(--kce-border);
  border-radius:var(--kce-radius);
}

/* ------------------------- Filter ------------------------- */
.kce-filters{
  margin:0 0 1rem 0; background:var(--kce-surface);
  border:1px solid var(--kce-border); border-radius:var(--kce-radius);
  padding:.9rem; box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.kce-f-row{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:flex-end; }
.kce-f-row label{ display:flex; flex-direction:column; gap:.25rem; font-weight:600; color:var(--kce-text); }
.kce-f-row label>span{ font-size:.9rem; color:var(--kce-muted); }

.kce-f-row select,
.kce-f-row input[type="date"]{
  min-width:180px; padding:.55rem .9rem;
  border:1px solid var(--kce-border); border-radius:12px;
  background:#fff; color:var(--kce-text);
  font: inherit;
}
.kce-f-row select{
  appearance:none; background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23778899' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:18px;
  padding-right:2rem;
}

/* ------------------------- Buttons (Basis) ------------------------- */
.kce-btn{
  --bg:#fff; --bd:var(--kce-border); --fg:var(--kce-text);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:12px;
  border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  text-decoration:none; cursor:pointer; font-weight:600; transition:.15s ease-in-out;
  font: inherit;
}
.kce-btn:hover{ transform:translateY(-1px); }
.kce-btn--block{ width:100%; justify-content:center; }
.kce-btn:focus, .kce-media:focus{ outline:var(--kce-focus); outline-offset:var(--kce-focus-offset); }

/* Primär – CI */
.kce-btn--primary{
  background:var(--kce-primary);
  border-color:var(--kce-primary);
  color:#fff !important;
}
.kce-btn--primary:hover,
.kce-btn--primary:focus{
  background:var(--kce-primary-900);
  border-color:var(--kce-primary-900);
  color:#fff !important;
}

/* Ghost */
.kce-btn--ghost{
  background:transparent; border-color:#D1D5DB; color:var(--kce-text);
}
.kce-btn--ghost:hover{
  border-color:#233563; color:#233563;
}

/* Filterbutton (weiß auf blau) */
.kce-btn--filter,
.kce-filters button.kce-btn,
.kce-filters .kce-btn[type="submit"]{
  background:#233563 !important;
  border-color:#233563 !important;
  color:#fff !important;
  font-weight:700;
}
.kce-btn--filter:hover,
.kce-filters button.kce-btn:hover,
.kce-filters .kce-btn[type="submit"]:hover{
  background:#1d2c56 !important;
  border-color:#1d2c56 !important;
  color:#fff !important;
}

/* ------------------------- Chips & Filter-Tags ------------------------- */
.kce-chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem .1rem 0; }
.kce-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .8rem; border-radius:999px; font-size:.86rem; font-weight:700;
  background:#233563; color:#fff; border:1px solid #233563;
  text-transform:uppercase;
}
.kce-chip:hover{ background:#1d2c56; border-color:#1d2c56; color:#fff; }

.kce-clear{
  display:inline-flex; align-items:center; gap:.35rem; font-weight:600;
  padding:.25rem .6rem; border-radius:10px; text-decoration:none;
  border:1px dashed var(--kce-border); color:var(--kce-muted);
}
.kce-clear:hover{ background:#fff; }

/* ------------------------- Karten ------------------------- */
.kce-card{
  background:var(--kce-bg); border:1px solid var(--kce-border);
  border-radius:var(--kce-radius); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:transform .16s ease, box-shadow .16s ease;
}
.kce-card:hover{ transform:translateY(-2px); box-shadow:var(--kce-shadow); }

.kce-media{ position:relative; display:block; }
.kce-thumb{ width:100%; height:220px; object-fit:cover; background:#f2f4f7; }
.kce-thumb--placeholder{ display:block; height:220px; background:#f2f4f7; }

.kce-badges{
  position:absolute; left:.75rem; bottom:.75rem; display:flex; gap:.5rem; flex-wrap:wrap;
}
.kce-badge{
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(4px);
  padding:.25rem .5rem; border-radius:.5rem; font-size:.85rem; font-weight:700;
  border:1px solid rgba(0,0,0,.05);
}

.kce-content{ padding:1rem; }

.kce-title{
  margin:0 0 .5rem;
  font-weight:700;
  line-height:1.25;
  font-size:clamp(18px, 0.6vw + 14px, 20px);
}
.kce-title a{
  color:inherit !important;
  text-decoration:none !important;
  pointer-events:none !important;
  cursor:default !important;
}

.kce-meta{ font-size:.95rem; color:var(--kce-muted); display:grid; gap:.25rem; }
.kce-actions{ display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }
.kce-note{ margin-top:.5rem; font-size:.86rem; color:#667085; }

/* ------------------------- Load More ------------------------- */
.kce-loadmore-wrap .kce-btn.kce-load-more,
.kce-loadmore-wrap .kce-btn.kce-load-more:hover,
.kce-loadmore-wrap .kce-btn.kce-load-more:focus{
  background-color:#233563 !important;
  border-color:#233563 !important;
  color:#fff !important;
  border-radius:8px;
  min-height:38px;
  padding:.6rem 1.1rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.kce-loadmore-wrap .kce-btn.kce-load-more:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  filter:brightness(1.03) saturate(1.03);
}

/* Kartenaktionen */
.kce-card .kce-actions .kce-btn--primary{
  background:#233563 !important;
  border-color:#233563 !important;
  color:#fff !important;
}
.kce-card .kce-actions .kce-btn--primary:hover{
  background:#1d2c56 !important;
  border-color:#1d2c56 !important;
  color:#fff !important;
}

.kce-card .kce-actions .kce-btn--ghost{
  background:#fff;
  color:#233563;
  border-color:#233563;
}
.kce-card .kce-actions .kce-btn--ghost:hover{
  background:#233563;
  color:#fff;
  border-color:#233563;
}

/* Accessibility */
.kce-btn:focus, .kce-media:focus{
  outline: 3px solid color-mix(in srgb, var(--kce-primary) 55%, white) !important;
  outline-offset: 2px;
}

/* Motion-Preference */
@media (prefers-reduced-motion: reduce){
  .kce-card, .kce-btn, .kce-load-more{ transition:none !important; }
}