/* ============================================================
   Ratgeber (/haircaretipps/ und Unterseiten) – seit 18.10.2026
   Ergänzt main.css, wird nur auf den Ratgeber-Seiten geladen.
   ============================================================ */

:root { --sand: #EDE7DD; }

/* Etiketten in Karten und Kästen ohne die Linie davor */
:is(.rg-card, .rg-kurz, .rg-box) .kicker::before { content: none; }

/* ---------- Übersicht: Karten ---------- */
.rg-grid { display: grid; gap: 1.5rem; }
.rg-side { display: grid; gap: 1.5rem; }
.rg-row  { display: grid; gap: 1.5rem; }
.rg-grid + .rg-row { margin-top: 1.5rem; }
@media (min-width: 900px) {
  .rg-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .rg-row  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rg-card {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--hairline);
  color: var(--ink); text-decoration: none;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.rg-card h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.15; letter-spacing: -0.015em; }
.rg-card p  { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.rg-card .kicker { margin: 0; }
.rg-card .rg-more {
  margin-top: auto; padding-top: 0.6rem;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.rg-card--beige { background: var(--sand); border-color: transparent; }
.rg-card--feature {
  background: var(--ink-deep); border-color: transparent; color: var(--text-inverse);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 1px 2px rgba(22, 19, 15, 0.08), 0 16px 40px rgba(22, 19, 15, 0.14);
}
.rg-card--feature h3 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 12ch; }
.rg-card--feature p, .rg-card--feature .kicker { color: var(--muted-inverse); }
.rg-card--feature p { font-size: 1.1rem; max-width: 42ch; }
.rg-card--feature .rg-more { padding-top: 2.5rem; }
@media (hover: hover) and (pointer: fine) {
  .rg-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(22, 19, 15, 0.1); }
  .rg-card:hover .arrow { transform: translateX(3px); }
}
.rg-card .arrow { display: inline-block; transition: transform 160ms var(--ease-out); }

/* Pflegeroutine: drei Schritte auf dunklem Grund */
.rg-steps { display: grid; gap: 2.5rem 3rem; }
@media (min-width: 900px) { .rg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rg-steps > div { border-top: 1px solid var(--hairline-inverse); padding-top: 1.75rem; }
.rg-steps h3 { margin-bottom: 0.8rem; }
.rg-steps p { margin: 0; color: var(--muted-inverse); }
.rg-note {
  display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; justify-content: space-between; align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--hairline-inverse);
}
.rg-note p { margin: 0; }
.rg-note .rg-links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.rg-note .text-link + .text-link { display: inline-flex; margin-top: 0; }
.rg-note .text-link--muted { color: var(--muted-inverse); }

/* Fragen links Überschrift, rechts Akkordeon */
.rg-faq { display: grid; gap: 2.5rem 6rem; }
@media (min-width: 900px) { .rg-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

.rg-cta { background: var(--sand); }
.rg-cta .container { display: flex; flex-wrap: wrap; gap: 2rem 4rem; justify-content: space-between; align-items: flex-end; }
.rg-cta h2 { max-width: 16ch; }
.rg-cta .lead { margin-top: 1.1rem; }

/* ---------- Artikel ---------- */
.rg-article { padding-top: clamp(3rem, 6vw, 5rem); }
.rg-article-head h1 { font-size: clamp(2.5rem, 6.2vw, 5rem); line-height: 1; max-width: 15ch; }
.rg-article-head .lead { margin-top: 1.75rem; max-width: 52ch; }
.rg-crumb a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .rg-crumb a:hover { color: var(--ink); } }

.rg-layout { display: flex; flex-wrap: wrap; gap: 4rem 6rem; align-items: flex-start; }
.rg-body { flex: 999 1 34rem; min-width: 0; max-width: 45rem; }
.rg-aside { flex: 1 1 18rem; max-width: 24rem; display: grid; gap: 1.5rem; }

.rg-body h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.08; letter-spacing: -0.02em; margin: clamp(3rem, 5vw, 3.75rem) 0 1.1rem; }
.rg-body p { font-size: 1.1rem; line-height: 1.7; margin: 0 0 1.1rem; max-width: 65ch; }
.rg-body a:not(.text-link) { color: var(--ink); text-underline-offset: 3px; }

.rg-kurz { background: var(--sand); padding: clamp(1.6rem, 3vw, 2.25rem); }
.rg-kurz .kicker { margin-bottom: 1rem; }
.rg-kurz ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; }
.rg-kurz li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.9rem; font-size: 1.05rem; line-height: 1.55; }
.rg-kurz li::before { content: ""; height: 1px; background: var(--ink); margin-top: 0.8rem; }

.rg-body .accordion { margin-top: 1rem; }
.rg-body .rg-faq-title { margin-top: clamp(4rem, 7vw, 5rem); }

.rg-box { padding: 2rem; }
.rg-box--ink { background: var(--ink-deep); color: var(--text-inverse); }
.rg-box--ink h3 { font-size: 1.5rem; line-height: 1.15; margin: 0 0 0.75rem; }
.rg-box--ink p { color: var(--muted-inverse); margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.6; }
.rg-box--ink .kicker { color: var(--muted-inverse); }
.rg-box--ink .btn { width: 100%; }
.rg-box--line { border: 1px solid var(--hairline); display: grid; gap: 0.85rem; }
.rg-box--line .kicker { margin: 0; }
.rg-box--line a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.rg-box--line .rg-shop { font-weight: 500; font-size: 0.98rem; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .rg-box--line a:hover { text-decoration: underline; text-underline-offset: 3px; } }