/* =========================================================
   Ratgeber (Blog) der Alltagshilfe Impuls
   Ergänzt assets/css/style.css, mobile first: Grundregeln
   gelten fürs Handy, größere Breiten nur per min-width.
   ========================================================= */

/* ---------- Kopf des Beitrags ---------- */

.ratgeber-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
  color: rgba(255, 255, 255, .82);
}
.ratgeber-meta li { display: inline-flex; align-items: center; gap: .45rem; }
.ratgeber-meta svg { width: 17px; height: 17px; flex: none; color: var(--lime-light); }

/* ---------- Fließtext ---------- */

.ratgeber-text { overflow-wrap: break-word; }
.ratgeber-text .lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ink);
}
.ratgeber-text p,
.ratgeber-text li { font-size: 1.06rem; line-height: 1.75; }
.ratgeber-text a:not(.btn) {
  color: var(--bordeaux);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.ratgeber-text a:not(.btn):hover { color: var(--bordeaux-dark); }

/* Standard-Infokasten: in allen Beiträgen gleich */
.callout.callout-info {
  border-left-color: var(--bordeaux);
  background: var(--sand);
}
.callout-info p { font-size: 1rem; }
.callout-info strong { color: var(--bordeaux); }

/* ---------- Abschluss mit Kontakt ---------- */

.ratgeber-kontakt .cta-actions { margin-top: 1.6rem; }

/* ---------- Kacheln: Übersicht und „Weitere Ratgeber“ ----------
   Jede Kachel nutzt die Zeilen des Rasters (subgrid): Bild, Kennzeile,
   Titel und Text beginnen in allen Kacheln einer Reihe auf gleicher Höhe,
   egal wie viele Zeilen der Titel braucht. */

.ratgeber-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1.25rem;
  row-gap: 1.25rem;
  margin-top: 2rem;
}

.ratgeber-karte {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Die Seite unterstreicht jeden Link beim Überfahren; für die Kachel nicht */
.ratgeber-karte,
.ratgeber-karte:hover,
.ratgeber-karte:focus-visible,
.ratgeber-karte * { text-decoration: none; }

.ratgeber-karte:hover,
.ratgeber-karte:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: transparent;
  color: var(--ink);
}

.ratgeber-karte-bild {
  display: block;
  overflow: hidden;
  margin-bottom: 1.3rem;
}
.ratgeber-karte img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.ratgeber-karte:hover img,
.ratgeber-karte:focus-visible img { transform: scale(1.04); }

.ratgeber-karte .eyebrow,
.ratgeber-karte h2,
.ratgeber-karte h3,
.ratgeber-karte p { margin-inline: 1.3rem; }

.ratgeber-karte .eyebrow { margin-bottom: .5rem; align-self: start; }
.ratgeber-karte h2,
.ratgeber-karte h3 {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: .6rem;
  text-wrap: balance;
  transition: color .25s var(--ease);
}
.ratgeber-karte:hover h2,
.ratgeber-karte:hover h3,
.ratgeber-karte:focus-visible h2,
.ratgeber-karte:focus-visible h3 { color: var(--bordeaux); }
.ratgeber-karte p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--grey);
}

@media (min-width: 700px) {
  .ratgeber-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .ratgeber-grid { grid-template-columns: repeat(3, 1fr); }
  .ratgeber-grid.zweier { grid-template-columns: repeat(2, 1fr); }
}