/*
**
** News Cards
**
*/
:root {
  --news-margin: 15px;
}

.news{
  /* max-width:1100px; */
  margin: calc(-1 * var(--news-margin));
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  justify-content: center;
}

.news-card{
  background:white;
  border-radius:14px;
  padding: var(--news-margin);
  padding-bottom: 5px;
  border:1px solid #eee;
  transition:all .2s ease;
  position:relative;
  box-shadow:0 2px 20px rgba(0,0,0,0.08);
}

.news-head{
  display:flex;
  margin-bottom: 1em;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.news-head time{
  order:2;
  font-size:.8rem;
  color:#888;
  letter-spacing:.04em;
}

.news-head h3{
  order:1;
  margin:2px 0 0;
  font-size:1.2rem;
  font-weight:600;
}

.news-body{
  overflow:hidden;
  max-height:4em;
  padding-right:4px; /* verhindert abgeschnittene Scrollbar */
  transition:max-height .4s ease;
  scroll-behavior:smooth;
}

.news-body p{
  color:#555;
  line-height:1.5;
}

.news-toggle{
  margin-left: 0;
  padding: 10px;
  transform: translateX(-10px);

  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--color-secondary);
  font-weight:500;
}

.chevron{
  width:18px;
  height:18px;
  stroke:#444;
  fill:none;
  stroke-width:2;
  transition:transform .3s ease;
}

.news-card.open .news-body{
  max-height: 100%/* 180px */;
}

.news-card.open .chevron{
  transform:rotate(180deg);
}

.news-card svg {
    stroke:var(--color-primary);
}