/* ===========================================================================
   C&A – THEMEN‑EXPLORER v5.1 Styles
   (kompakt, mehr Text; ohne Datum/Meta; optional Infinite‑Scroll)
   Enthält:
   - Header (smoothe grüne Fläche)
   - View‑Switcher (schöne Buttons)
   - Filterkarte, Suche, Chips
   - Ergebnisse/Titleline
   - Grid & Karten (inkl. 💬‑Zähler auf Karten)
   - Pagination (Fallback)
   - Wolke / A‑Z / Beliebt
   - „Diskurs aktiv“-Badges (Chips + Beliebt)
   - Loader, Progressive Rendering, Utilities
   =========================================================================== */

:root{
  --ca-teal:#0F766E;
  --ca-teal-2:#14b8a6;
  --ca-border:#e5e5e5;
  --ca-ink:#1e293b;
  --ca-soft:#fafafa;
  --ca-muted:#64748b;

  /* Sichtbare Zeilen für Titel/Teaser */
  --title-lines:3;
  --excerpt-lines:4;
}

/* --------------------------------
   Header (smoothe grüne Fläche)
-----------------------------------*/
.ca-explorer-header{
  background:linear-gradient(135deg,var(--ca-teal) 0%,var(--ca-teal-2) 100%);
  color:#fff;
  padding:2rem 1.5rem;
  border-radius:20px;
  margin-bottom:1.5rem;
  box-shadow:0 10px 40px rgba(15,118,110,.2);
}
.ca-header-content{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; flex-wrap:wrap;
}
.ca-main-title{font-size:2.25em; font-weight:900; margin:0 0 .4rem; line-height:1.2}
.ca-subtitle{font-size:1.05em; opacity:.95; margin:0}
@media (max-width:768px){
  .ca-explorer-header{ padding:1.25rem 1rem }
  .ca-header-content{ flex-direction:column; align-items:flex-start }
  .ca-main-title{ font-size:1.8em }
}

/* --------------------------------
   View‑Switcher (schöne Buttons)
-----------------------------------*/
.ca-view-switcher{
  display:flex; gap:.5rem;
  background:rgba(255,255,255,.2);
  padding:.5rem; border-radius:12px;
  backdrop-filter:blur(10px);
}
.view-btn{
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; background:transparent;
  border:2px solid transparent; border-radius:8px;
  color:#fff; font-weight:700; cursor:pointer; transition:.25s;
}
.view-btn:hover{ background:rgba(255,255,255,.15) }
.view-btn.active{
  background:#fff; color:var(--ca-teal);
  box-shadow:0 4px 12px rgba(0,0,0,.15)
}
@media (max-width:768px){ .view-btn svg{ display:none } }

/* --------------------------------
   Container + Filterkarte
-----------------------------------*/
.ca-views-container{ position:relative; min-height:360px }
.ca-view{ animation:fadeIn .35s ease }

.ca-ultimate-explorer .ca-filter-card{
  border:2px solid var(--ca-border); border-radius:16px; background:#fff;
  box-shadow:0 4px 22px rgba(0,0,0,.06);
  padding:1.25rem; margin:0 0 1.25rem;
}

/* Suche (oben) */
.ca-ultimate-explorer .ca-search-box{ position:relative; margin-bottom:1rem }
.ca-ultimate-explorer .search-icon{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  color:#666; pointer-events:none
}
.ca-ultimate-explorer input[type="search"]{
  width:100%; border:2px solid var(--ca-border); border-radius:12px;
  padding:.75rem 3rem; font-size:1.02em; background:var(--ca-soft);
  transition:.25s;
}
.ca-ultimate-explorer input[type="search"]:focus{
  outline:none; border-color:var(--ca-teal); background:#fff;
  box-shadow:0 0 0 4px rgba(15,118,110,.10)
}
.clear-search{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ca-border); background:#fff; cursor:pointer;
}

/* ODER/UND‑Logik */
.ca-ultimate-explorer .ca-logic-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  padding:.75rem; background:#fafafa; border-radius:12px; margin-bottom:1rem;
}
.ca-ultimate-explorer .ca-radio{
  display:inline-flex; align-items:center; gap:.5rem;
  cursor:pointer; padding:.45rem .8rem;
  border:2px solid var(--ca-border); border-radius:8px;
  background:#fff; transition:.2s;
}
.ca-ultimate-explorer .ca-radio:hover{ border-color:var(--ca-teal); background:rgba(15,118,110,.05) }
.ca-ultimate-explorer .ca-radio:has(input:checked){
  border-color:var(--ca-teal); background:var(--ca-teal); color:#fff;
}

/* Chips‑Sektion */
.ca-ultimate-explorer .ca-tags-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin:.25rem 0 .75rem;
}
.ca-ultimate-explorer .ca-clear{
  background:#fff; border:2px solid var(--ca-border); border-radius:8px;
  padding:.4rem .7rem; cursor:pointer; font-weight:700;
}
.ca-ultimate-explorer .ca-clear:hover{ border-color:var(--ca-teal); background:#f0fdfa }

.ca-ultimate-explorer .ca-tag-search{ position:relative; margin:0 0 .6rem }
.ca-ultimate-explorer .tag-search-icon{
  position:absolute; left:.6rem; top:50%; transform:translateY(-50%); color:#666
}
.ca-ultimate-explorer #ca-tag-filter{
  width:100%; border:2px solid var(--ca-border); border-radius:12px;
  padding:.6rem 2.4rem; background:#fff; transition:.2s
}
.ca-ultimate-explorer #ca-tag-filter:focus{
  outline:none; border-color:var(--ca-teal); box-shadow:0 0 0 4px rgba(15,118,110,.10)
}
.ca-ultimate-explorer .tag-search-clear{
  position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--ca-border); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

.ca-ultimate-explorer .ca-chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.4rem }
.ca-ultimate-explorer .chip.chk{
  position:relative;
  display:inline-flex; align-items:center; gap:.5rem;
  border:2px solid var(--ca-border); background:#fff;
  border-radius:24px; padding:.45rem .9rem; cursor:pointer; transition:.2s;
  font-size:.95em
}
.ca-ultimate-explorer .chip.chk input{ position:absolute; opacity:0; pointer-events:none }
.ca-ultimate-explorer .chip.chk:hover{ border-color:var(--ca-teal); background:rgba(15,118,110,.05); transform:translateY(-1px) }
.ca-ultimate-explorer .chip.chk:has(input:checked){
  background:linear-gradient(135deg,var(--ca-teal),var(--ca-teal-2));
  color:#fff; border-color:var(--ca-teal);
  box-shadow:0 4px 10px rgba(15,118,110,.25)
}
.ca-ultimate-explorer .chip-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; background:rgba(0,0,0,.08);
  border-radius:11px; font-size:.82em; font-weight:700; padding:0 .35rem
}
.ca-ultimate-explorer .chip.chk:has(input:checked) .chip-count{
  background:rgba(255,255,255,.25); color:#fff
}
.ca-ultimate-explorer .ca-no-tags-found{ padding:.35rem 0; color:var(--ca-muted) }

/* Aktive Filter (oben über Ergebnissen) */
.ca-active-filters{
  border:2px solid var(--ca-border); border-radius:12px; padding:.75rem; margin-bottom:.9rem; background:#fff
}
.ca-active-filters .filter-header{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem }
.ca-active-filters .filter-tags{ display:flex; flex-wrap:wrap; gap:.4rem }
.ca-active-filters .filter-tag{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border:2px solid var(--ca-border); border-radius:999px;
  background:#fff; cursor:pointer; transition:.2s
}
.ca-active-filters .filter-tag:hover{ border-color:var(--ca-teal); background:#f0fdfa }
.ca-active-filters .remove-x{ margin-left:.25rem; font-weight:900 }
.ca-active-filters .filter-logic{ display:inline-block; margin-top:.5rem; color:var(--ca-muted) }

/* --------------------------------
   Ergebnisse / Titelzeile
-----------------------------------*/
#ca-results-container{ transition:opacity .22s ease-out; min-height:200px; will-change:opacity }
.ca-results-header .results-title{ font-weight:800; margin:.25rem 0 1rem }
.count-number{ display:inline-block; min-width:1.8ch; text-align:right }

/* --------------------------------
   Grid & Karten (kompakt + mehr Text)
-----------------------------------*/
.ca-ultimate-explorer .ca-post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.25rem; margin-bottom:1.5rem;
}
.ca-ultimate-explorer .ca-post-card{
  position:relative;
  display:flex; flex-direction:column;
  border:2px solid var(--ca-border); border-radius:12px; overflow:hidden; background:#fff;
  transition:.25s;
}
.ca-ultimate-explorer .ca-post-card:hover{
  border-color:var(--ca-teal);
  box-shadow:0 8px 20px rgba(15,118,110,.14);
  transform:translateY(-3px);
}
.ca-ultimate-explorer .ca-thumb{ display:block; height:160px; overflow:hidden; background:#f3f4f6; position:relative }
.ca-ultimate-explorer .ca-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.ca-ultimate-explorer .ca-post-content{ padding:1rem }
.ca-ultimate-explorer .ca-post-title{ margin:0 0 .35rem }
.ca-ultimate-explorer .ca-post-title a{
  font-size:1.12em; line-height:1.35; font-weight:800; color:var(--ca-ink); text-decoration:none;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--title-lines); overflow:hidden;
  hyphens:auto; overflow-wrap:anywhere;
}
.ca-ultimate-explorer .ca-excerpt{
  margin:.35rem 0 0; color:#334155; font-size:.97em;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--excerpt-lines); overflow:hidden;
  hyphens:auto; overflow-wrap:anywhere;
}

/* 💬-Zähler (Kommentaranzahl) auf Karten */
.ca-disc-count{
  position:absolute; top:.5rem; right:.5rem;
  background:linear-gradient(135deg,var(--ca-teal),var(--ca-teal-2));
  color:#fff; border-radius:999px; padding:.2rem .55rem;
  font-weight:800; font-size:.85em; line-height:1;
  box-shadow:0 4px 12px rgba(15,118,110,.25);
}
.ca-disc-count.no-thumb{ position:absolute; top:.5rem; right:.5rem }

/* --------------------------------
   Pagination (Fallback)
-----------------------------------*/
.ca-pagination .page-numbers{ display:flex; gap:.4rem; flex-wrap:wrap }
.ca-pagination .current,
.ca-pagination .page-link{
  min-width:32px; height:32px; border-radius:8px; border:2px solid var(--ca-border);
  display:inline-flex; align-items:center; justify-content:center; padding:0 .5rem
}
.ca-pagination .current{ background:var(--ca-teal); color:#fff; border-color:var(--ca-teal) }
.ca-pagination .page-link{ background:#fff; cursor:pointer }
.ca-pagination .page-link:hover{ border-color:var(--ca-teal); background:#f0fdfa }

/* --------------------------------
   Wolke
-----------------------------------*/
.ca-cloud{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  padding:1.25rem; background:#fff; border-radius:16px; box-shadow:0 4px 18px rgba(0,0,0,.06)
}
.ca-cloud .chip{
  display:inline-block; padding:.45rem .9rem;
  border:2px solid var(--ca-border); border-radius:24px;
  color:#1e293b; transition:.25s; background:linear-gradient(135deg,#fff,#f8fafc)
}
.ca-cloud .chip:hover{
  border-color:var(--ca-teal);
  background:linear-gradient(135deg,#f0fdfa,#ccfbf1);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(15,118,110,.18)
}
.ca-cloud .chip.w1{ font-size:.85em; opacity:.85 }
.ca-cloud .chip.w2{ font-size:1em }
.ca-cloud .chip.w3{ font-size:1.12em; font-weight:600 }
.ca-cloud .chip.w4{ font-size:1.25em; font-weight:700 }
.ca-cloud .chip.w5{
  font-size:1.45em; font-weight:800;
  background:linear-gradient(135deg,var(--ca-teal),var(--ca-teal-2));
  color:#fff; border-color:var(--ca-teal)
}

/* --------------------------------
   A‑Z (Index)
-----------------------------------*/
.ca-tag-index-content{
  background:#fff; border-radius:16px; padding:1.25rem; box-shadow:0 4px 18px rgba(0,0,0,.06)
}
.idx-letter{
  font-size:2.5em; font-weight:900; color:var(--ca-teal);
  margin:1.6rem 0 .9rem; padding-bottom:.4rem;
  border-bottom:4px solid var(--ca-teal-2);
  position:sticky; top:72px; background:#fff; z-index:5;
  box-shadow:0 6px 12px -8px rgba(0,0,0,.15)
}
.idx-grid{ display:grid; gap:.6rem; margin-bottom:.6rem }
.idx-grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.idx-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:.75rem 1rem; border:2px solid var(--ca-border); border-radius:10px;
  background:#fff; transition:.2s
}
.idx-item:hover{
  border-color:var(--ca-teal); background:#f0fdfa;
  transform:translateX(6px); box-shadow:0 4px 10px rgba(15,118,110,.15)
}
.idx-item .name{ font-weight:700 }
.idx-item .count{
  display:flex; align-items:center; justify-content:center;
  min-width:40px; height:40px;
  background:linear-gradient(135deg,var(--ca-teal),var(--ca-teal-2));
  color:#fff; border-radius:50%; font-weight:800; font-size:.95em
}
@media (max-width:900px){ .idx-grid.cols-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:680px){ .idx-grid{ grid-template-columns:1fr !important } .idx-letter{ top:64px } }

/* --------------------------------
   Beliebt (Top‑Tags)
-----------------------------------*/
.popular-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.75rem }
.popular-tile{
  position:relative; display:flex; align-items:center; gap:.8rem;
  padding:.85rem 1rem; background:#fff; border:2px solid #5eead4; border-radius:12px;
  cursor:pointer; transition:.22s; overflow:hidden; isolation:isolate;
}
.popular-tile::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--ca-teal),var(--ca-teal-2));
  opacity:.08; transform:translateY(100%); transition:transform .3s ease; z-index:0;
}
.popular-tile:hover{ border-color:var(--ca-teal); box-shadow:0 6px 18px rgba(15,118,110,.18); transform:translateY(-2px) }
.popular-tile:hover::before{ transform:translateY(0) }
.rank-badge{
  position:relative; z-index:1; width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--ca-teal),var(--ca-teal-2));
  color:#fff; font-weight:800; font-size:.9em; display:flex; align-items:center; justify-content:center
}
.tile-name{ position:relative; z-index:1; flex:1; font-weight:700; color:var(--ca-teal) }
.tile-count{
  position:relative; z-index:1; font-size:.9em; color:var(--ca-muted); font-weight:700;
  padding:.25rem .6rem; background:#f1f5f9; border-radius:20px
}

/* — Diskurs aktiv: Hervorhebung + Badge */
.ca-ultimate-explorer .chip.has-discurs{
  border-color:var(--ca-teal);
  box-shadow:inset 0 0 0 3px rgba(15,118,110,.06)
}
.ca-ultimate-explorer .chip-badge{
  display:inline-flex; align-items:center; height:20px; padding:0 .45rem; margin-left:.35rem;
  font-size:.75em; font-weight:800; color:#fff; border-radius:10px;
  background:linear-gradient(135deg,var(--ca-teal),var(--ca-teal-2));
}
.popular-tile.disc-active{ border-color:var(--ca-teal); box-shadow:0 6px 18px rgba(15,118,110,.18) }
.popular-tile .disc-badge{
  position:absolute; top:.5rem; right:.5rem;
  background:#0F766E; color:#fff; border-radius:999px; padding:.2rem .5rem;
  font-size:.8em; font-weight:800; box-shadow:0 4px 12px rgba(15,118,110,.25)
}

/* --------------------------------
   Loader (Infinite)
-----------------------------------*/
#ca-infinite-loader{ font-weight:600 }
#ca-infinite-loader::after{ content:' …'; animation:dot 1.2s infinite steps(3,end) }
@keyframes dot {0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}

/* --------------------------------
   Progressive Rendering
-----------------------------------*/
@supports (content-visibility: auto){
  .ca-post-card{ content-visibility:auto; contain-intrinsic-size:320px 420px }
}

/* --------------------------------
   Utilities / Animation / A11y
-----------------------------------*/
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes pulse{ 0%,100%{opacity:.3} 50%{opacity:.7} }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}
.sr-only{ position:absolute; left:-9999px }

/* --------------------------------
   Mobile Tuning
-----------------------------------*/
@media (max-width:768px){
  .ca-ultimate-explorer .ca-post-grid{ grid-template-columns:1fr }
}