.demo-page{background:var(--paper);padding-bottom:3rem}.demo-page>.page-shell{padding-top:1.5rem}.demo-heading{max-width:75ch;margin-bottom:1.5rem}.demo-heading h1{max-width:26ch;margin-bottom:.6rem;font-size:clamp(2rem,4vw,3.1rem);line-height:1.12}.demo-heading>p{margin-bottom:.7rem;font-size:1rem}.demo-disclosure{border-left:3px solid var(--copper);color:var(--slate-dark);padding-left:1rem}.demo-example{border:1px solid var(--line);background:#fff;margin-block:1.5rem 2.25rem;padding:clamp(1rem,2vw,1.5rem)}.demo-example h2,#demo-interactive-title{margin-bottom:1rem;font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.2}.demo-example__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-bottom:1rem;display:grid}.demo-example__grid>div{min-width:0}.demo-example h3{margin-bottom:.75rem;font-size:1.25rem}.demo-example p{font-size:1rem;line-height:1.6}.demo-example dl{margin:0}.demo-example dl>div{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;gap:.25rem .75rem;padding-block:.35rem;display:flex}.demo-example dt{color:var(--slate-dark);font-size:.875rem}.demo-example dd{margin:0;font-weight:700}.demo-example__blocked{border-left:3px solid var(--copper-dark);padding-left:1rem}#demo-ausprobieren{scroll-margin-top:7rem}@media (max-width:760px){.demo-example__grid{grid-template-columns:1fr;gap:1rem}}
