/*********************************************************
 * Couch & Agora – CSS Pack C: Startseite & Kategorie-Landing (final)
 * Benötigt Tokens aus ca-base.css (–ca-accent, –ca-bg-card etc.)
 * 
 * BEREINIGT: Dark Mode wurde in zentrales Snippet ausgelagert
 * 
 * WICHTIG: Dieses CSS gilt NUR für .rubrik-card OHNE ca- Prefix!
 * Die Homepage verwendet .ca-rubrik-card (mit Prefix) und wird
 * davon NICHT beeinflusst.
 * 
 *********************************************************/

/* ===== Startseite – Rubriken-Karten (Textrahmen) ===== */
.rubrik-grid{ row-gap:1.25rem; }

/* NUR .rubrik-card ohne ca- prefix - NICHT .ca-rubrik-card */
.rubrik-card:not([class*="ca-"]){
  position:relative;
  border:1px solid var(--ca-border-light);
  border-radius:12px;
  background:var(--ca-bg-subtle);
  padding:1rem 1.2rem;
  cursor:pointer;
  transition:
    transform .2s cubic-bezier(.4,0,.2,1),
    box-shadow .2s cubic-bezier(.4,0,.2,1),
    border-color .2s cubic-bezier(.4,0,.2,1);
}
.rubrik-card:not([class*="ca-"]):hover{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  border-color:var(--ca-panel-border);
}
.rubrik-card:not([class*="ca-"]) h3{ margin:0 0 .35rem; font-size:clamp(18px,2.2vw,22px); }
.rubrik-card:not([class*="ca-"]) p{ margin:0; color:var(--ca-text-secondary); }
.rubrik-card:not([class*="ca-"]) p + p{ margin-top:.35rem; }

/* ===== Kategorie-Landing – Labels über Chips/Kacheln ===== */
.ca-nav-title, .ca-grid-title, .ca-sections-title{
  margin:.9rem 0 .45rem; font-weight:700;
}

/* „Springe zu …"-Chips (sticky, damit immer greifbar) */
.ca-nav-wrap{ margin:.2rem 0 .9rem; }
.ca-subcat-nav{
  position:-webkit-sticky;
  position:sticky;
  top:8px;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.ca-subcat-nav a{
  text-decoration:none;
  border:1px solid var(--ca-border-light);
  background:var(--ca-bg-card);
  color:var(--ca-text-primary);
  padding:.18rem .6rem;
  border-radius:999px;
  font-size:.9em;
  transition:border-color .15s ease;
}
.ca-subcat-nav a:hover{ border-color:var(--ca-panel-border); }
.ca-subcat-nav a:focus-visible{ outline:2px solid var(--ca-accent); outline-offset:2px; }

/* ===== Unterkategorien-Grid (Container-Query-fähig) ===== */
.ca-subcat-grid{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.ca-subcat-grid .rubrik-card{
  padding:0;
  background:var(--ca-bg-card);
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--ca-border-light);
  box-shadow:0 1px 1px rgba(0,0,0,.02);
}

/* ===== Bild-Cover (Moderne Browser mit aspect-ratio Support) ===== */
.ca-subcat-grid .rubrik-card .rubrik-cover{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--ca-bg-subtle);
  border-bottom:1px solid var(--ca-border-light);
  width:100%;
}
@media (max-width:720px){
  .ca-subcat-grid .rubrik-card .rubrik-cover{
    aspect-ratio:4/3;
  }
}

.ca-subcat-grid .rubrik-card .rubrik-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  display:block;
}

/* Karten-Body */
.ca-subcat-grid .rubrik-body{ padding:.9rem 1rem 1rem; }
.ca-subcat-grid .rubrik-card h3{ margin:0 0 .35rem; font-size:clamp(18px,2.2vw,22px); }
.ca-subcat-grid .rubrik-card .desc{
  margin:0;
  color:var(--ca-text-secondary);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ca-subcat-grid .rubrik-card .meta-row{
  display:flex;
  gap:.5rem;
  align-items:center;
  margin-top:.5rem;
}
.ca-subcat-grid .count-chip{
  border:1px solid var(--ca-border-light);
  border-radius:999px;
  padding:.12rem .48rem;
  font-size:.88em;
  color:var(--ca-text-secondary);
  background:var(--ca-bg-subtle);
}
.ca-subcat-grid .more{
  margin-left:auto;
  text-decoration:none;
  font-weight:600;
  border-bottom:1px dotted currentColor;
}

/* ===== Media-Listen (Unterkategorie & Sektionen) ===== */
.ca-post-list.media{
  list-style:none;
  padding:0;
  margin:.4rem 0 0;
  display:grid;
  gap:14px;
}
.ca-post-list.media .ca-post{
  display:grid;
  grid-template-columns:clamp(160px,26vw,300px) 1fr;
  gap:14px;
  border:1px solid var(--ca-border-light);
  border-radius:12px;
  background:var(--ca-bg-card);
  padding:.65rem .75rem;
  transition:box-shadow .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1);
}
.ca-post-list.media .ca-post:hover{
  border-color:var(--ca-panel-border);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
@media (max-width:840px){
  .ca-post-list.media .ca-post{ grid-template-columns:1fr; }
}

/* Post Thumbnails */
.ca-post-list.media .ca-thumb{
  position:relative;
  display:block;
  aspect-ratio:3/2;
  background:var(--ca-bg-subtle);
  border-radius:10px;
  overflow:hidden;
}
@media (max-width:840px){
  .ca-post-list.media .ca-thumb{ aspect-ratio:4/3; }
}
.ca-post-list.media .ca-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.ca-post-list.media .ca-post:hover .ca-thumb img{ transform:scale(1.03); }
.ca-post .ca-post-title{ text-decoration:none; font-weight:700; }
.ca-post .ca-post-title:hover{ text-decoration:underline; }
.ca-post .ca-post-title:focus-visible{ outline:2px solid var(--ca-accent); outline-offset:2px; }

/* Sektionen-Variante */
.ca-subcat-section .ca-post-list.media .ca-post{ grid-template-columns:140px 1fr; }

/* ===== Vollflächig klickbare Karten – Overlay-LINK ===== */
/* NUR für .rubrik-card in .ca-subcat-grid, NICHT für .ca-rubrik-card */
.ca-subcat-grid .rubrik-card{ position:relative; }

.ca-subcat-grid .rubrik-card a.rubrik-link{
  position:absolute;
  inset:0;
  z-index:999;
  display:block;
  text-indent:-9999px;
  overflow:hidden;
}

.ca-subcat-grid .rubrik-card > *:not(a.rubrik-link){
  position:relative;
  z-index:0;
}

.ca-subcat-grid .rubrik-card a.rubrik-link:focus-visible{
  outline:2px solid var(--ca-accent);
  outline-offset:4px;
}

/* Anker-Offset */
.ca-subcat-section{ scroll-margin-top: var(--ca-anchor-offset, 96px); }

/* ===========================
   Lesbarkeit in Karten (Light Mode)
   =========================== */
.ca-subcat-grid .rubrik-card,
.ca-post-list.media .ca-post{
  color: var(--ca-text-primary);
  background: var(--ca-bg-card);
}

.ca-subcat-grid .rubrik-card h3,
.ca-subcat-grid .rubrik-card h3 a,
.ca-post .ca-post-title{
  color: inherit;
  text-decoration: none;
}
.ca-subcat-grid .rubrik-card h3 a:hover,
.ca-post .ca-post-title:hover{ text-decoration: underline; }

.ca-subcat-grid .rubrik-card .desc,
.ca-subcat-grid .rubrik-card .meta-row,
.ca-post .ca-excerpt{
  color: var(--ca-text-secondary);
}

.ca-subcat-grid .count-chip{
  color: var(--ca-text-secondary);
  background: var(--ca-bg-subtle);
  border: 1px solid var(--ca-border-light);
}
.ca-subcat-grid .more{
  color: var(--ca-text-primary);
  border-bottom: 1px dotted currentColor;
}

/* ==========================================================
   iOS/Safari COMPATIBILITY LAYER
   ========================================================== */

@supports not (gap: 1rem){
  .ca-subcat-nav{
    margin:.2rem 0 .9rem -0.4rem;
  }
  .ca-subcat-nav a{
    margin:0 .4rem .4rem;
  }
}

@supports not (gap: 22px){
  .ca-subcat-grid{
    grid-gap:22px;
  }
}

@supports not (aspect-ratio: 1 / 1){
  .ca-subcat-grid .rubrik-card .rubrik-cover{
    position: relative;
  }
  .ca-subcat-grid .rubrik-card .rubrik-cover::before{
    content: "";
    display: block;
    width: 100%;
    padding-top: 62.5%;
  }
  @media (max-width: 720px){
    .ca-subcat-grid .rubrik-card .rubrik-cover::before{
      padding-top: 75%;
    }
  }
  .ca-subcat-grid .rubrik-card .rubrik-cover img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ca-post-list.media .ca-thumb{
    position: relative;
  }
  .ca-post-list.media .ca-thumb::before{
    content: "";
    display: block;
    width: 100%;
    padding-top: 66.666%;
  }
  @media (max-width: 840px){
    .ca-post-list.media .ca-thumb::before{
      padding-top: 75%;
    }
  }
  .ca-post-list.media .ca-thumb img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* iOS Legacy Mode */
.ca-legacy-cards .ca-subcat-grid .rubrik-card .rubrik-cover{
  min-height:200px;
}

.ca-legacy-cards .ca-subcat-grid .rubrik-card .rubrik-cover img{
  position:static !important;
}

.ca-legacy .ca-subcat-grid .rubrik-card a.rubrik-link{
  display:none !important;
}

@media (prefers-reduced-motion: reduce){
  .rubrik-card,
  .ca-post,
  .ca-thumb img,
  .ca-subcat-grid .rubrik-card .rubrik-cover img{
    transition:none !important;
    transform:none !important;
  }
}