/* Kopie des Etch-Stylesheets "designsystem demoseite". */
/* Nur fuer die Demoseite /designsystem/ - gehoert nicht zum System selbst. */
.ds-swatches { display: grid; gap: var(--e-s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.ds-farbe { border: 1px solid var(--e-linie); }
.ds-farbe__feld { height: 5.5rem; }
.ds-farbe__text { padding: var(--e-s3) var(--e-s4); font-size: var(--e-klein); display: flex; flex-direction: column; gap: 2px; }
.ds-farbe__name { font-weight: 700; color: var(--e-text); }
.ds-farbe__hex { color: var(--e-grau-hell); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.ds-ph { display: grid; place-items: center; background: linear-gradient(135deg, #e2e6ea, #c4cbd3); color: #fff; font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .08em; }
.ds-probe { border-top: 1px solid var(--e-linie); padding-top: var(--e-s4); margin-bottom: var(--e-s5); }
.ds-probe__meta { font-size: var(--e-mini); color: var(--e-grau-hell); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-bottom: var(--e-s2); }
.ds-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--e-mini); background: var(--e-flaeche-hell); border: 1px solid var(--e-linie); padding: 2px 6px; color: var(--e-blau-tief); }
.ds-abstand { display: flex; align-items: center; gap: var(--e-s3); margin-bottom: var(--e-s2); font-size: var(--e-klein); color: var(--e-grau); }
.ds-abstand__balken { height: 14px; background: var(--e-blau); }

/* Diese Bausteine sind <p>, weil wpautop sonst eigene Absaetze einzieht. */
p.ds-farbe__text, p.ds-abstand, p.ds-probe__meta { max-width: none; }
p.ds-farbe__text { margin: 0; color: var(--e-grau); }
p.ds-abstand { margin: 0 0 var(--e-s2); }
p.ds-probe__meta { color: var(--e-grau-hell); }