/* ====== Design-Token ====== */
:root {
  --ccf-bg:        #0f1216;
  --ccf-panel:     #161b22;
  --ccf-border:    #2a2f36;
  --ccf-text:      #e6e8eb;
  --ccf-text-dim:  #9aa3ad;
  --ccf-accent:    #18a0fb;
  --ccf-radius:    14px;
  --ccf-radius-sm: 999px;
  --ccf-gap:       1.1rem;
  --ccf-shadow:    0 6px 24px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.18);
}

.ccf-wrap { margin: 1.25rem 0; color: var(--ccf-text); }

/* ====== Filter-Chips ====== */
.ccf-filters {
  position: sticky; top: .5rem; z-index: 3;
  display: flex; gap: .5rem; overflow: auto; padding: .35rem;
  border: 1px solid var(--ccf-border);
  background: linear-gradient(180deg, rgba(22,27,34,.86), rgba(22,27,34,.86));
  backdrop-filter: saturate(140%) blur(8px);
  border-radius: var(--ccf-radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  scroll-snap-type: x mandatory;
}

.ccf-filters::before, .ccf-filters::after {
  content: ""; position: sticky; top: 0; width: 24px; flex: 0 0 24px; z-index: 2;
}
.ccf-filters::before { left: 0;  background: linear-gradient(90deg, rgba(15,18,22,1), rgba(15,18,22,0)); }
.ccf-filters::after  { right: 0; background: linear-gradient(270deg, rgba(15,18,22,1), rgba(15,18,22,0)); }

.ccf-chip {
  scroll-snap-align: start;
  border: 1px solid var(--ccf-border);
  background: #0f141a;
  color: var(--ccf-text);
  padding: .42rem .85rem;
  border-radius: var(--ccf-radius-sm);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.ccf-chip:hover { transform: translateY(-1px); border-color: #39414a; }
.ccf-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24,160,251,.35);
  border-color: var(--ccf-accent);
}
.ccf-chip.is-active {
  background: linear-gradient(180deg, rgba(24,160,251,.14), rgba(24,160,251,.06));
  color: #dff1ff;
  border-color: rgba(24,160,251,.5);
}

/* ====== Grid + Karten ====== */
.ccf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ccf-gap);
  margin-top: 1rem;
  align-items: stretch;
}
.ccf-grid[aria-busy="true"] { opacity: .7; filter: saturate(.8); transition: opacity .12s ease; }

/* Karte */
.ccf-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ccf-panel);
  border: 1px solid var(--ccf-border);
  border-radius: var(--ccf-radius);
  box-shadow: var(--ccf-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}
@media (hover:hover) {
  .ccf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 34px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.22);
    border-color: #3a424c;
  }
}

/* Bildbereich */
.ccf-thumb { display: block; aspect-ratio: 16/9; background: #11161c; position: relative; }
.ccf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Body */
.ccf-body { padding: .9rem 1rem 1rem; display: grid; gap: .45rem; }
.ccf-title { margin: 0; font-size: clamp(.98rem, 1.1vw + .6rem, 1.12rem); line-height: 1.24; }
.ccf-title a { text-decoration: none; color: var(--ccf-text); }
.ccf-title a:hover { color: #eaf6ff; }

.ccf-date {
  display: inline-block;
  font-size: .82rem; color: var(--ccf-text-dim);
  background: #0d1117; border: 1px solid var(--ccf-border);
  padding: .18rem .5rem; border-radius: var(--ccf-radius-sm);
}

/* Auszug */
.ccf-excerpt {
  margin: .15rem 0 0; font-size: .95rem; color: #d0d6dc;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Platzhalterbild */
.ccf-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(90deg, #10151b 25%, #141a21 37%, #10151b 63%);
  background-size: 400% 100%;
  animation: ccf-shimmer 1.3s ease-in-out infinite;
}
@keyframes ccf-shimmer { 0%{background-position: 100% 0;} 100%{background-position: 0 0;} }

/* Sentinel für Infinite Scroll */
.ccf-sentinel {
  display: flex; align-items: center; justify-content: center;
  height: 56px; margin-top: .5rem;
}
.ccf-wrap[data-has-more="0"] .ccf-sentinel { display: none; }
.ccf-sentinel::after {
  content: ""; width: 22px; height: 22px;
  border: 3px solid var(--ccf-border);
  border-top-color: var(--ccf-accent);
  border-radius: 50%;
  animation: ccf-spin .8s linear infinite;
  opacity: 0; transform: scale(.9);
  transition: opacity .12s ease;
}
.ccf-sentinel.is-loading::after { opacity: 1; }
@keyframes ccf-spin { to { transform: rotate(360deg); } }

/* Redirect-Modus: Sentinel ausblenden */
.ccf-wrap[data-mode="redirect"] .ccf-sentinel { display: none; }

/* ====== Mobile: Chips umbrechen ====== */
@media (max-width: 640px) {
  .ccf-filters {
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
    row-gap: .4rem;
    padding: .35rem .45rem;
  }
  .ccf-filters::before,
  .ccf-filters::after { display: none; }
  .ccf-chip { scroll-snap-align: unset; }
}

/* Kleinbildschirme: Grid enger */
@media (max-width: 560px) {
  .ccf-grid { gap: .9rem; }
}