/* Quote-Block: ohne dekoratives Anführungszeichen */
.quote-block::before { display: none; }
/* ── FILTER TABS ───────────────────────────────── */
.filter-section{
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 84px;
  z-index: 50;
}.filter-inner{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--s8);
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}.filter-tab{
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  padding: var(--s4) var(--s5);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  min-height: 44px;
}.filter-tab:hover{
  color: var(--ink);
}.filter-tab.active{
  color: var(--red-deep);
  font-weight: 600;
  border-bottom-color: var(--red-deep);
}.filter-tab:focus-visible{
  outline: 2px solid var(--red-deep);
  outline-offset: -2px;
  border-radius: 3px;
}/* ── ARTICLE GRID ──────────────────────────────── */
.articles-section{
  background: var(--bg);
  padding: var(--s12) 0 var(--s12);
}.articles-inner{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--s8);
}.articles-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s6);
}/* ── ARTICLE CARD ──────────────────────────────── */
.article-card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}.article-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}.article-card-image-link{
  display: block;
  text-decoration: none;
  line-height: 0;
}.article-card-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--turq-lt);
  filter: grayscale(100%) contrast(1.15);
  transition: filter 0.5s ease;
}.article-card:hover .article-card-image{
  filter: grayscale(0%) contrast(1);
}.article-card-image--placeholder{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}.article-card-body{
  padding: var(--s5) var(--s6) var(--s6);
  display: flex;
  flex-direction: column;
  flex: 1;
}.article-card-meta{
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}.article-tag{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--pill);
  line-height: 1.4;
}.article-tag--werkschau{
  background: var(--turq-lt);
  color: #4a6048;
}.article-tag--ki-funken{
  background: var(--red-wash);
  color: var(--red-deep);
}.article-tag--fundstuecke{
  background: var(--red-wash);
  color: #8a6d3b;
}.article-tag--tiefgang{
  background: var(--border);
  color: var(--red-deep);
}.article-tag--zwischentoene{
  background: var(--bg);
  color: var(--red-deep);
}.article-card-date{
  font-size: var(--text-xs);
  color: var(--muted);
}.article-card-title{
  font-family: var(--f-display);
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: var(--s2);
}.article-card-title a{
  color: inherit;
  text-decoration: none;
}.article-card-title a:hover{
  color: var(--red-deep);
  text-decoration: none;
}.article-card-teaser{
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--s4);
  flex: 1;
}.article-card-link{
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--red-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  transition: gap 0.2s;
}.article-card-link:hover{
  gap: 0.6em;
  text-decoration: none;
}/* ── EMPTY STATE ───────────────────────────────── */
.articles-empty{
  display: none;
  text-align: center;
  padding: var(--s16) var(--s8);
  color: var(--muted);
  font-size: var(--text-lg);
}/* ── CTA OVERRIDE (eigene Hintergrundfarbe) ───── */
.cta-bottom{
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 680px) {.page-hero{ padding: var(--s10) 0 var(--s8); }.page-hero-title{ font-size: var(--text-xl); }.articles-grid{ grid-template-columns: 1fr; }.articles-section{ padding: var(--s8) 0 var(--s12); }
}