/* Block dpk/skizze - übernommen aus design/hundesport/skizzen.html
   ("Ab hier: wird ins Theme übernommen"), Farben als Tokens aus theme.json.
   Wird nur geladen, wenn der Block auf der Seite steht. */
.dpk-skizze { margin: 0 0 40px; border: 1px solid var(--wp--preset--color--linie); border-radius: 12px; background: var(--wp--preset--color--papier-tief); padding: 20px; }
.dpk-skizze__pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.dpk-skizze__pills button { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 2px solid var(--wp--preset--color--tinte); background: var(--wp--preset--color--karte); color: var(--wp--preset--color--tinte); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.dpk-skizze__pills button[aria-pressed="true"] { background: var(--wp--preset--color--tinte); color: var(--wp--preset--color--karte); }
.dpk-skizze__pills button:focus-visible { outline: 3px solid var(--wp--preset--color--sport); outline-offset: 2px; }
.dpk-skizze__pills--stufen { align-items: flex-end; gap: 8px; }
.dpk-skizze__pills--stufen button { flex: 1 1 96px; min-width: 96px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; padding: 8px 12px; border-radius: 8px 8px 0 0; line-height: 1.25; }
.dpk-skizze__pills--stufen button small { font-size: 13px; font-weight: 400; }
.dpk-skizze svg { display: block; width: 100%; height: auto; background: var(--wp--preset--color--karte); border-radius: 8px; }
.dpk-skizze figcaption { margin-top: 12px; font-size: 16px; color: var(--wp--preset--color--grau); }
.dpk-skizze figcaption strong { display: block; font-size: 19px; color: var(--wp--preset--color--tinte); }
.dpk-skizze figcaption ul { margin: 8px 0 0; padding-left: 22px; color: var(--wp--preset--color--tinte); }
/* Zustände: alles mit .dpk-z ist versteckt, bis die Figur den passenden data-aktiv-Wert trägt */
.dpk-z { display: none; }
[data-aktiv="a"] .z-a, [data-aktiv="b"] .z-b,
[data-aktiv="einstieg"] .z-einstieg, [data-aktiv="voll"] .z-voll,
[data-aktiv="hhp"] .z-hhp, [data-aktiv="lp1"] .z-lp1, [data-aktiv="lp2"] .z-lp2, [data-aktiv="lp3"] .z-lp3, [data-aktiv="lp4"] .z-lp4 { display: revert; }
[data-aktiv="einstieg"] .nur-voll { opacity: 0.22; }