/* smile+: Abschnitt „Wie wirkt smile+?“ (/produkte/smile-plus/#wirkprinzip) – nur auf dieser Seite geladen (Meta „css: wirkprinzip“).
   Schrift-Rollen wie base.css: Abschnittstitel h2 step-3, Karten-h3 step-1, Fließtext step-0, Quellenzeile step--1. */
.wirk-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wirk-grid .card { background: var(--color-surface); box-shadow: none; }
.wirk-grid .card p { max-width: none; }
.wirk-grid .card a { color: var(--color-primary-text); font-weight: 600; }
.wirk-quelle { margin-top: auto; padding-top: var(--space-2xs); font-size: var(--step--1); color: var(--color-muted); }
.wirk-note { margin-top: var(--space-m); padding: var(--space-m) var(--space-l); border: 1px solid var(--color-line); border-radius: var(--radius); background: #fff; }
.wirk-note h3 { margin-bottom: var(--space-2xs); }
.wirk-note p { max-width: none; }
.wirk-note .wirk-quelle { margin-top: var(--space-2xs); }
/* Produktseiten: Definitionssatz unter dem Lead (Slot der Buybox), auch ohne Widget lesbar */
.pdp-def { max-width: 62ch; }
.wirk-more { margin-top: var(--space-l); }
.wirk-more a { color: var(--color-primary-text); font-weight: 600; }
/* Abschnitt „Problemlöser“ (#problemloeser): drei Karten + Praxis-Zitat */
.problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wirk-note .zg-proof-t { display: block; }
.problem-zitat { margin: var(--space-2xs) 0 0; padding: 0 0 0 var(--space-s); border-left: 3px solid var(--color-primary); }
.problem-zitat p { font-style: italic; }
@media (max-width: 60rem) { .problem-grid { grid-template-columns: 1fr; } }
@media (max-width: 44rem) {
  .wirk-grid { grid-template-columns: 1fr; gap: var(--space-s); }
  .wirk-grid .card { padding: var(--space-m); gap: var(--space-2xs); }
}