/* ═══════════════════════════════════════════════════════
   LEO-TEC — tipps.css
   Ratgeber-Übersicht + Einzelartikel
   ═══════════════════════════════════════════════════════ */

/* ── Übersicht ─────────────────────────────────────────── */
.tipps-section { background: var(--clr-bg); }

/* Intro-Banner */
.tipps-intro {
  display: flex; align-items: flex-start; gap: 1.25rem;
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-navy);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.5rem; margin-bottom: var(--sp-lg);
}
.tipps-intro__avatar {
  width: 60px; height: 60px; flex-shrink: 0;
  background: var(--clr-navy); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85);
}
.tipps-intro strong { display: block; color: var(--clr-navy-dark); margin-bottom: .35rem; }
.tipps-intro p { font-size: .92rem; color: var(--clr-text-muted); line-height: 1.7; }

/* Filter */
.tipps-filter {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-md);
}
.tipps-filter-btn {
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .45rem 1rem;
  border: 1.5px solid var(--clr-border); border-radius: 100px;
  background: var(--clr-surface); color: var(--clr-text-muted);
  cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.tipps-filter-btn:hover { border-color: var(--clr-navy-light); color: var(--clr-navy); }
.tipps-filter-btn--active {
  background: var(--clr-navy); border-color: var(--clr-navy); color: #fff;
}

/* Artikel-Grid */
.tipps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 1024px) { .tipps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tipps-grid { grid-template-columns: 1fr; } }

/* Artikel-Karte */
.tipp-card {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg); padding: 1.75rem;
  display: flex; flex-direction: column; gap: .85rem;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-out);
  position: relative; overflow: hidden;
}
.tipp-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--clr-navy), var(--clr-navy-mid));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.tipp-card:hover { border-color: var(--clr-navy-light); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.tipp-card:hover::after { transform: scaleX(1); }
.tipp-card[hidden] { display: none; }

.tipp-card__header { display: flex; justify-content: space-between; align-items: center; }
.tipp-card__kategorie {
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--clr-navy);
  background: var(--clr-navy-pale); padding: .2rem .6rem; border-radius: 3px;
}
.tipp-card__lesezeit {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--ff-mono); font-size: .64rem;
  letter-spacing: .08em; color: var(--clr-text-faint);
}

.tipp-card__icon {
  width: 48px; height: 48px; background: var(--clr-navy-pale);
  border-radius: var(--radius); display: flex; align-items: center;
  justify-content: center; color: var(--clr-navy);
}
.tipp-card__titel { font-size: 1rem; font-weight: 600; color: var(--clr-navy-dark); line-height: 1.3; }
.tipp-card__sub   { font-size: .85rem; color: var(--clr-text-muted); line-height: 1.6; flex: 1; }
.tipp-card__link  {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-head); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--clr-navy);
  margin-top: auto; transition: gap .2s;
}
.tipp-card__link:hover { gap: .7rem; }

/* ── Einzelartikel ─────────────────────────────────────── */
.artikel-kategorie-tag {
  display: inline-block; font-family: var(--ff-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px; padding: .25rem .75rem; color: rgba(255,255,255,.9);
  margin-bottom: .75rem;
}
.artikel-meta {
  display: flex; align-items: center; gap: 1.5rem;
  margin-top: .75rem; flex-wrap: wrap;
}
.artikel-meta span {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .1em;
  color: rgba(255,255,255,.5);
}

/* Layout */
.artikel-layout {
  display: grid; grid-template-columns: 1fr 300px;
  gap: var(--sp-lg); align-items: start;
  margin-bottom: var(--sp-md);
}
@media (max-width: 900px) { .artikel-layout { grid-template-columns: 1fr; } }

/* Artikel-Body */
.artikel-body {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.85;
}
.artikel-body h3 { font-size: 1.1rem; color: var(--clr-navy-dark); margin: 1.75rem 0 .65rem; }
.artikel-body h3:first-child { margin-top: 0; }
.artikel-body p  { color: var(--clr-text-muted); margin-bottom: .9rem; font-size: .97rem; }
.artikel-body strong { color: var(--clr-text); }

/* Tipp-Box */
.ratgeber-tipp-box {
  background: var(--clr-navy-pale); border-left: 4px solid var(--clr-navy);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.4rem; margin-top: 1.5rem;
  font-size: .95rem; color: var(--clr-text-muted); line-height: 1.75;
}
.ratgeber-tipp-box strong { color: var(--clr-navy-dark); }

/* Autor-Box */
.artikel-autor {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--clr-border);
}
.artikel-autor__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--clr-navy); display: flex; align-items: center;
  justify-content: center; color: rgba(255,255,255,.85);
}
.artikel-autor strong { display: block; font-size: .95rem; color: var(--clr-navy-dark); }
.artikel-autor span  { font-size: .82rem; color: var(--clr-text-faint); }

/* Sidebar */
.artikel-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: calc(var(--nav-h) + 1rem); }
.artikel-sidebar__box {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg); padding: 1.5rem;
}
.artikel-sidebar__box h3 { font-size: 1rem; color: var(--clr-navy-dark); margin-bottom: .75rem; }
.artikel-sidebar__box p  { font-size: .88rem; color: var(--clr-text-muted); margin-bottom: 1rem; }
.artikel-sidebar__box .btn { margin-bottom: .6rem; }
.artikel-sidebar__box .btn:last-child { margin-bottom: 0; }

.artikel-sidebar__weitere h3 { border-bottom: 1px solid var(--clr-border); padding-bottom: .75rem; }
.artikel-sidebar__link {
  display: block; padding: .65rem 0; border-bottom: 1px solid var(--clr-border-2);
  font-size: .88rem; color: var(--clr-text-muted); line-height: 1.4;
  transition: color .2s;
}
.artikel-sidebar__link:hover { color: var(--clr-navy); }
.artikel-sidebar__link:last-child { border-bottom: none; }
.artikel-sidebar__link-kat {
  display: block; font-family: var(--ff-mono); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--clr-navy);
  margin-bottom: .2rem;
}

.artikel-back { margin-top: var(--sp-sm); }