/* =====================================================================
   couture margot – Ratgeber-Landingpage (home.php)
   Themen-Bündelung, Live-Filter, Kennzahlen. Nutzt die Theme-Tokens (--cm-*).
   Wird nur auf der Beitragsseite /ratgeber/ geladen.
   ===================================================================== */

.cm-rg{ --cm-rg-nav-offset:0px; background:var(--cm-bg); }
/* Reveal ist eine Aufwertung: ohne JS (kein html.cm-js) bleibt alles sichtbar. */
html:not(.cm-js) .cm-rg .cm-reveal{ opacity:1; transform:none; }
.cm-rg-wrap{ width:92%; max-width:var(--cm-maxw); margin:0 auto; }
.cm-rg .cm-sub{ margin:0; }
.cm-rg-sechead{ margin-bottom:34px; }
.cm-rg-sechead h2{ margin:0 0 8px; }
.cm-rg-sechead.cm-center{ text-align:center; }
.cm-rg-sechead.cm-center .cm-sub{ margin:0 auto; }

/* ---------- Hero ---------- */
.cm-rg-hero{ padding:64px 0 56px;
  background:radial-gradient(1100px 520px at 88% -18%, var(--cm-green-soft), transparent 62%),
             linear-gradient(120deg,#f4ffe2 0%,#fff 58%); }
.cm-rg-hero-grid{ display:grid; grid-template-columns:1fr 360px; gap:56px; align-items:center; }
.cm-rg-hero h1{ margin:6px 0 0; font-size:clamp(2.2rem,4.4vw,3.4rem); }
.cm-rg-lead{ font-size:1.12rem; color:var(--cm-ink-2); margin:16px 0 0; max-width:58ch; }

/* Live-Suche */
.cm-rg-search{ position:relative; display:flex; align-items:center; margin-top:26px; max-width:560px;
  background:#fff; border:2px solid var(--cm-ink); border-radius:14px; box-shadow:var(--cm-shadow); }
.cm-rg-search-ic{ position:absolute; left:16px; width:20px; height:20px; color:var(--cm-muted); pointer-events:none; }
.cm-rg-search input{ width:100%; border:0; background:transparent; font:inherit; font-size:1rem;
  padding:15px 46px 15px 46px; border-radius:14px; color:var(--cm-ink); }
.cm-rg-search input::placeholder{ color:#8a9382; }
.cm-rg-search input:focus{ outline:none; }
.cm-rg-search input::-webkit-search-cancel-button{ display:none; }
.cm-rg-search:focus-within{ box-shadow:0 0 0 4px rgba(153,255,51,.45); }
.cm-rg-search-clear{ position:absolute; right:10px; border:0; background:var(--cm-bg-soft); color:var(--cm-ink-2);
  width:28px; height:28px; border-radius:50%; font-size:1.15rem; line-height:1; cursor:pointer; }
.cm-rg-search-clear:hover{ background:var(--cm-green); }

/* Kennzahlen */
.cm-rg-stats{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cm-rg-stat{ background:rgba(255,255,255,.72); border:1px solid var(--cm-line); border-radius:var(--cm-radius);
  padding:16px 18px; }
.cm-rg-stat-num{ display:block; font-family:var(--cm-serif); font-weight:600; font-size:2.1rem; line-height:1;
  color:var(--cm-ink); font-variant-numeric:tabular-nums; }
.cm-rg-stat-label{ display:block; font-weight:700; font-size:.9rem; margin-top:6px; }
.cm-rg-stat-hint{ display:block; color:var(--cm-muted); font-size:.8rem; margin-top:2px; }

/* Donut – Themenverteilung */
.cm-rg-chart{ margin:0; }
.cm-rg-donut{ width:100%; max-width:290px; margin:0 auto; display:block; overflow:visible; }
.cm-rg-donut-track{ fill:none; stroke:var(--cm-line); stroke-width:17; }
/* Ohne JS bleiben die Segmente sichtbar; „is-armed“ setzt JS erst zum Einblenden. */
.cm-rg-seg{ fill:none; stroke-width:17; stroke-linecap:butt; cursor:pointer;
  transform:rotate(-90deg); transform-origin:70px 70px;
  transition:opacity .55s ease var(--cm-delay,0ms), stroke-width .2s ease; }
.cm-rg-chart.is-armed .cm-rg-seg{ opacity:0; }
.cm-rg-chart.is-armed.is-visible .cm-rg-seg{ opacity:1; }
.cm-rg-chart.is-dim .cm-rg-seg{ opacity:.2; transition-delay:0ms; }
.cm-rg-chart .cm-rg-seg.is-hot{ opacity:1; stroke-width:23; transition-delay:0ms; }
.cm-rg-donut-num{ font-family:var(--cm-serif); font-weight:600; font-size:1.9rem; fill:var(--cm-ink);
  font-variant-numeric:tabular-nums; }
.cm-rg-donut-cap{ font-family:var(--cm-sans); font-size:.62rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; fill:var(--cm-muted); }
.cm-rg-legend{ display:flex; flex-direction:column; gap:2px; margin-top:18px; }
.cm-rg-legend-item{ display:flex; align-items:center; gap:9px; width:100%; border:0; background:transparent;
  padding:6px 10px; border-radius:9px; cursor:pointer; font:inherit; font-size:.9rem; text-align:left;
  color:var(--cm-ink-2); }
.cm-rg-legend-item:hover,.cm-rg-legend-item:focus-visible{ background:rgba(255,255,255,.85); color:var(--cm-ink); }
.cm-rg-dot{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.cm-rg-legend-name{ flex:1 1 auto; }
.cm-rg-legend-num{ font-weight:800; font-variant-numeric:tabular-nums; color:var(--cm-ink); }

/* ---------- Neu im Ratgeber ---------- */
.cm-rg-new{ padding:70px 0 10px; }
.cm-rg-new-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:26px; align-items:start; }
.cm-rg-lead-card{ display:block; background:#fff; border:1px solid var(--cm-line); border-radius:var(--cm-radius-lg);
  overflow:hidden; box-shadow:var(--cm-shadow); color:var(--cm-ink);
  transition:transform .18s,box-shadow .18s,border-color .18s; }
.cm-rg-lead-card:hover{ transform:translateY(-3px); box-shadow:var(--cm-shadow-lg);
  border-color:var(--cm-green); color:var(--cm-ink); }
.cm-rg-lead-media{ position:relative; display:block; aspect-ratio:16/9; background:var(--cm-bg-soft); }
.cm-rg-lead-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cm-rg-flag{ position:absolute; top:14px; left:14px; background:var(--cm-green); color:var(--cm-ink);
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.cm-rg-lead-body{ display:block; padding:26px 28px 28px; }
.cm-rg-lead-title{ display:block; font-family:var(--cm-serif); font-weight:600; font-size:1.6rem;
  line-height:1.2; margin:10px 0 8px; }
.cm-rg-lead-text{ display:block; color:var(--cm-ink-2); }
.cm-rg-lead-card .cm-rg-meta{ margin-top:16px; }

.cm-rg-side{ display:flex; flex-direction:column; gap:18px; }
.cm-rg-list{ list-style:none; margin:0; padding:0; background:#fff; border:1px solid var(--cm-line);
  border-radius:var(--cm-radius); box-shadow:var(--cm-shadow); overflow:hidden; }
.cm-rg-list li + li{ border-top:1px solid var(--cm-line); }
.cm-rg-list a{ display:flex; gap:13px; align-items:flex-start; padding:15px 18px; color:var(--cm-ink);
  transition:background .15s; }
.cm-rg-list a:hover{ background:var(--cm-bg-soft); }
.cm-rg-list-ic{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:10px;
  background:var(--cm-green-soft); color:var(--cm-link); }
.cm-rg-list-ic .cm-ic{ width:19px; height:19px; }
.cm-rg-list strong{ display:block; font-size:.97rem; font-weight:700; line-height:1.35; }
.cm-rg-list em{ display:block; font-style:normal; color:var(--cm-muted); font-size:.83rem; margin-top:3px; }

/* Pflege-Tipp der Woche (cm-content) im Ratgeber-Kontext */
.cm-rg-side .cm-tip{ background:var(--cm-green-soft); border:1px solid #cdf29a; border-radius:var(--cm-radius);
  padding:22px 24px; }
.cm-rg-side .cm-tip h3{ margin:12px 0 6px; }
.cm-rg-side .cm-tip p{ color:var(--cm-ink-2); margin:0; font-size:.96rem; }

/* ---------- Sticky Filterleiste ---------- */
.cm-rg-filterbar{ position:sticky; top:var(--cm-rg-nav-offset); z-index:30; margin-top:60px;
  background:rgba(255,255,255,.93); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--cm-line); border-bottom:1px solid var(--cm-line); transition:box-shadow .2s; }
.cm-rg-filterbar.is-stuck{ box-shadow:0 10px 26px rgba(17,21,17,.09); }
.cm-rg-filterbar-inner{ display:flex; align-items:center; gap:18px; padding:12px 0; }
.cm-rg-chips{ display:flex; gap:8px; flex:1 1 auto; overflow-x:auto; scrollbar-width:none; padding:2px 0; }
.cm-rg-chips::-webkit-scrollbar{ display:none; }
.cm-rg-chip{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; cursor:pointer; font:inherit;
  font-size:.88rem; font-weight:600; padding:9px 15px; border-radius:999px;
  border:1.5px solid var(--cm-line); background:#fff; color:var(--cm-ink-2); transition:all .15s; }
.cm-rg-chip:hover{ border-color:var(--cm-green-dark); color:var(--cm-ink); }
.cm-rg-chip.is-active{ background:var(--cm-ink); border-color:var(--cm-ink); color:#fff; }
.cm-rg-chip-ic{ width:17px; height:17px; }
.cm-rg-chip-num{ font-size:.76rem; font-weight:800; padding:1px 7px; border-radius:999px;
  background:var(--cm-green-soft); color:var(--cm-link); }
.cm-rg-chip.is-active .cm-rg-chip-num{ background:var(--cm-green); color:var(--cm-ink); }
.cm-rg-count{ margin:0; flex:0 0 auto; color:var(--cm-muted); font-size:.85rem; font-variant-numeric:tabular-nums; }

/* ---------- Themen-Gruppen ---------- */
.cm-rg-groups{ padding:56px 0 80px; background:var(--cm-bg-soft); }
.cm-rg-group{ margin-bottom:64px; scroll-margin-top:calc(var(--cm-rg-nav-offset) + 84px); }
.cm-rg-group:last-of-type{ margin-bottom:0; }
.cm-rg-group.is-hidden{ display:none; }
.cm-rg-group-head{ display:grid; grid-template-columns:auto 1fr 190px; gap:20px; align-items:center; margin-bottom:24px; }
.cm-rg-group-ic{ display:grid; place-items:center; width:54px; height:54px; border-radius:15px;
  background:var(--cm-green-soft); color:var(--cm-ink); border:1.5px solid var(--cm-line);
  border-color:color-mix(in srgb, var(--cm-tone,var(--cm-green)) 55%, #fff);
  background:color-mix(in srgb, var(--cm-tone,var(--cm-green)) 20%, #fff); }
.cm-rg-group-ic .cm-ic{ width:26px; height:26px; }
.cm-rg-group-text h2{ margin:0; font-size:clamp(1.5rem,2.4vw,2rem); display:flex; align-items:center; gap:11px;
  flex-wrap:wrap; }
.cm-rg-group-num{ font-family:var(--cm-sans); font-size:.78rem; font-weight:800; letter-spacing:.04em;
  background:var(--cm-ink); color:var(--cm-green); padding:3px 10px; border-radius:999px; }
.cm-rg-group-text p{ margin:6px 0 0; color:var(--cm-muted); font-size:.97rem; max-width:62ch; }
.cm-rg-group-bar{ text-align:right; }
.cm-rg-group-bar > span{ display:block; height:8px; border-radius:999px; background:var(--cm-line);
  position:relative; overflow:hidden; }
/* Ohne JS ist der Balken direkt gefüllt; mit JS (html.cm-js) wächst er beim Reveal. */
.cm-rg-group-bar > span::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:var(--cm-share,0%);
  background:var(--cm-tone,var(--cm-green)); border-radius:999px;
  transform-origin:left; transition:transform .9s cubic-bezier(.22,1,.36,1) .15s; }
html.cm-js .cm-rg-group-bar > span::after{ transform:scaleX(0); }
html.cm-js .cm-rg-group-head.is-visible .cm-rg-group-bar > span::after{ transform:scaleX(1); }
.cm-rg-group-bar em{ display:block; font-style:normal; color:var(--cm-muted); font-size:.78rem; margin-top:7px; }

/* Karten */
.cm-rg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cm-rg-card{ background:#fff; border:1px solid var(--cm-line); border-radius:var(--cm-radius);
  overflow:hidden; box-shadow:var(--cm-shadow); transition:transform .18s,box-shadow .18s,border-color .18s; }
.cm-rg-card.is-hidden{ display:none; }
.cm-rg-card:hover{ transform:translateY(-3px); box-shadow:var(--cm-shadow-lg); border-color:var(--cm-green); }
.cm-rg-card-link{ display:flex; flex-direction:column; height:100%; color:var(--cm-ink); }
.cm-rg-card-media{ display:block; aspect-ratio:16/10; background:var(--cm-bg-soft); overflow:hidden; }
.cm-rg-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.cm-rg-card:hover .cm-rg-card-media img{ transform:scale(1.04); }
.cm-rg-media-fallback{ display:grid; place-items:center; width:100%; height:100%;
  background:radial-gradient(120% 100% at 20% 0%, var(--cm-green-soft), #fff 70%); }
.cm-rg-media-ic{ width:52px; height:52px; color:var(--cm-green-dark); opacity:.75; }
.cm-rg-card-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:20px 22px 18px; }
.cm-rg-tag{ display:inline-block; align-self:flex-start; font-size:.7rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cm-link); background:var(--cm-green-soft); padding:4px 10px; border-radius:999px; }
.cm-rg-card-body h3{ margin:11px 0 7px; font-size:1.08rem; line-height:1.35; }
.cm-rg-card-body p{ margin:0 0 16px; color:var(--cm-ink-2); font-size:.93rem; line-height:1.6; }
.cm-rg-meta{ display:flex; align-items:center; gap:6px; margin-top:auto; color:var(--cm-muted);
  font-size:.83rem; font-weight:600; }
.cm-rg-meta-ic{ width:15px; height:15px; }
.cm-rg-more{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; color:var(--cm-link); font-weight:700; }
.cm-rg-card:hover .cm-rg-more{ color:var(--cm-green-dark); }

/* Leer-Zustand */
.cm-rg-empty{ text-align:center; color:var(--cm-muted); font-size:1.05rem; padding:40px 0 10px; }
.cm-rg-reset{ display:inline-block; margin-left:10px; border:1.5px solid var(--cm-ink); background:var(--cm-green);
  color:var(--cm-ink); font:inherit; font-weight:700; font-size:.9rem; padding:8px 18px; border-radius:10px; cursor:pointer; }
.cm-rg-reset:hover{ background:var(--cm-ink); color:var(--cm-green); }

/* ---------- Werkzeuge (Tabs) ---------- */
.cm-rg-tools{ padding:80px 0; }
.cm-rg-tablist{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.cm-rg-tab{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit; font-weight:700;
  font-size:.92rem; padding:11px 20px; border-radius:12px; border:1.5px solid var(--cm-line); background:#fff;
  color:var(--cm-ink-2); transition:all .15s; }
.cm-rg-tab:hover{ border-color:var(--cm-green-dark); }
.cm-rg-tab.is-active{ background:var(--cm-green); border-color:var(--cm-ink); color:var(--cm-ink); }
.cm-rg-panel[hidden]{ display:none; }

/* ---------- Lexikon ---------- */
.cm-rg-lexikon{ padding:0 0 80px; }
.cm-rg-details{ max-width:900px; margin:0 auto 14px; background:#fff; border:1px solid var(--cm-line);
  border-radius:var(--cm-radius); padding:4px 26px; box-shadow:var(--cm-shadow); }
.cm-rg-details summary{ display:flex; align-items:center; gap:11px; cursor:pointer; font-weight:700;
  font-size:1.05rem; padding:18px 0; list-style:none; }
.cm-rg-details summary::-webkit-details-marker{ display:none; }
.cm-rg-details summary .cm-ic{ color:var(--cm-green-dark); }
.cm-rg-details[open] summary{ border-bottom:1px solid var(--cm-line); }
.cm-rg-details .cm-index{ padding:18px 0 22px; }

/* ---------- Abschluss-Band ---------- */
.cm-rg-band{ background:var(--cm-green); padding:66px 0; text-align:center; }
.cm-rg-band h2{ color:var(--cm-ink); margin:0; }
.cm-rg-band p{ color:var(--cm-ink-2); max-width:58ch; margin:12px auto 0; }
.cm-rg-band .cm-band-cta{ justify-content:center; }
.cm-rg-band .cm-btn--primary{ background:var(--cm-ink); color:var(--cm-green); border-color:var(--cm-ink); }
.cm-rg-band .cm-btn--primary:hover{ background:#000; color:#fff; }
.cm-rg-band .cm-btn--ghost{ color:var(--cm-ink); border-color:var(--cm-ink); }
.cm-rg-band .cm-btn--ghost:hover{ background:var(--cm-ink); color:var(--cm-green); }

/* =====================================================================
   EINZELBEITRAG – interne Verlinkung (single.php)
   ===================================================================== */

/* Automatisch gesetzte Links im Fliesstext (cm-content). Dezent, aber
   erkennbar – sie sollen nicht wie eine Werbefläche wirken. */
.cm-post-body a.cm-autolink{ color:var(--cm-link); text-decoration:none;
  background-image:linear-gradient(var(--cm-green),var(--cm-green));
  background-repeat:no-repeat; background-position:0 100%; background-size:100% 2px;
  padding-bottom:1px; transition:background-size .18s ease, color .18s ease; }
.cm-post-body a.cm-autolink:hover{ color:var(--cm-ink); background-size:100% 100%; }

/* Kategorie-Pill im Kopf ist jetzt ein Link aufs Kategorie-Archiv. */
.cm-pill--link{ transition:background .15s, color .15s; }
.cm-pill--link:hover{ background:var(--cm-ink); color:var(--cm-green); }

/* Vorheriger / nächster Beitrag */
.cm-post-nav{ padding:34px 0 0; }
.cm-post-nav-inner{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cm-post-nav-link{ display:block; background:#fff; border:1px solid var(--cm-line); border-radius:var(--cm-radius);
  padding:16px 20px; color:var(--cm-ink); transition:transform .15s,box-shadow .15s,border-color .15s; }
.cm-post-nav-link:hover{ transform:translateY(-2px); box-shadow:var(--cm-shadow); border-color:var(--cm-green); color:var(--cm-ink); }
.cm-post-nav-link em{ display:block; font-style:normal; color:var(--cm-muted); font-size:.78rem;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }
.cm-post-nav-link strong{ display:block; font-weight:700; font-size:.99rem; line-height:1.35; }
.cm-post-nav-next{ grid-column:2; text-align:right; }
.cm-post-nav-prev::before{ content:"←"; color:var(--cm-green-dark); font-weight:700; margin-right:6px; }
.cm-post-nav-next::after{ content:"→"; color:var(--cm-green-dark); font-weight:700; margin-left:6px; }

/* „Passend dazu“ – verwandte Beiträge */
.cm-post-related{ background:var(--cm-bg-soft); padding:64px 0 60px; margin-top:48px; }
.cm-post-related .cm-rg-sechead{ margin-bottom:28px; }
.cm-post-related .cm-rg-sechead h2{ font-size:clamp(1.5rem,2.4vw,2rem); }
.cm-rg-grid--3{ grid-template-columns:repeat(3,1fr); }
.cm-post-related-all{ margin:30px 0 0; text-align:center; }
.cm-post-related-all a{ font-weight:700; color:var(--cm-link); }
.cm-post-related-all a::after{ content:" →"; }
.cm-post-related-all a:hover{ color:var(--cm-green-dark); }

@media(max-width:900px){
  .cm-post-nav-inner{ grid-template-columns:1fr; }
  .cm-post-nav-next{ grid-column:1; text-align:left; }
  .cm-post-nav-next::after{ content:""; }
  .cm-post-nav-next::before{ content:"→"; color:var(--cm-green-dark); font-weight:700; margin-right:6px; }
}
@media(max-width:760px){
  .cm-post-related{ padding:44px 0 40px; margin-top:34px; }
}

/* ---------- Responsive ---------- */
@media(max-width:1060px){
  .cm-rg-hero-grid{ grid-template-columns:1fr; gap:38px; }
  .cm-rg-chart{ max-width:560px; margin:0 auto; }
  .cm-rg-legend{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .cm-rg-legend-item{ width:auto; }
  .cm-rg-grid{ grid-template-columns:repeat(2,1fr); }
  .cm-rg-new-grid{ grid-template-columns:1fr; }
  .cm-rg-group-head{ grid-template-columns:auto 1fr; }
  .cm-rg-group-bar{ grid-column:1 / -1; text-align:left; }
}
@media(max-width:760px){
  .cm-rg-hero{ padding:44px 0 40px; }
  .cm-rg-stats{ grid-template-columns:repeat(2,1fr); }
  .cm-rg-lead-title{ font-size:1.35rem; }
  .cm-rg-filterbar{ margin-top:44px; }
  .cm-rg-filterbar-inner{ flex-direction:column; align-items:stretch; gap:8px; }
  .cm-rg-count{ text-align:right; }
  .cm-rg-chips{ margin:0 -4%; padding:2px 4%; }
  .cm-rg-new{ padding:52px 0 6px; }
  .cm-rg-groups{ padding:40px 0 60px; }
  .cm-rg-group{ margin-bottom:48px; }
  .cm-rg-tools{ padding:56px 0; }
  .cm-rg-lexikon{ padding:0 0 56px; }
}
@media(max-width:560px){
  .cm-rg-grid{ grid-template-columns:1fr; }
  .cm-rg-stats{ gap:10px; }
  .cm-rg-stat{ padding:13px 14px; }
  .cm-rg-stat-num{ font-size:1.7rem; }
  .cm-rg-lead-body{ padding:20px 20px 22px; }
  .cm-rg-details{ padding:4px 18px; }
  .cm-rg-band{ padding:48px 0; }
}
@media (prefers-reduced-motion:reduce){
  .cm-rg-seg,.cm-rg-card,.cm-rg-lead-card,.cm-rg-card-media img,.cm-rg-group-bar > span::after{ transition:none !important; }
  .cm-rg-group-bar > span::after{ transform:scaleX(1); }
  .cm-rg-chart .cm-rg-seg{ opacity:1; }
}