.wsg-styleguide{--wsg-gap:24px;display:grid;gap:42px;max-width:1400px;margin:0 auto;padding:24px 0}.wsg-styleguide *{box-sizing:border-box}.wsg-section{display:grid;gap:22px}.wsg-section-head h2{margin:0 0 6px}.wsg-section-head p{margin:0;opacity:.7}.wsg-component-grid,.wsg-tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--wsg-gap)}.wsg-asset-grid{display:grid;grid-template-columns:1fr;gap:18px}.wsg-asset-card,.wsg-color-card,.wsg-component-card,.wsg-type-card,.wsg-tech-item{border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 18%,transparent);border-radius:14px;padding:20px}.wsg-asset-card{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:28px;align-items:center}.wsg-asset-preview{min-height:170px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,currentColor 4%,transparent);border-radius:10px;padding:20px;margin:0}.wsg-asset-preview img{max-width:100%;max-height:150px;object-fit:contain}.wsg-asset-preview.wsg-favicon img{max-width:96px;max-height:96px}.wsg-asset-details{min-width:0}.wsg-asset-details h3{margin:0 0 12px}.wsg-asset-open{display:inline-block;margin-top:8px}

/* Farben: eine Farbe pro Zeile, große Farbfläche links, Werte sauber ausgerichtet rechts */
.wsg-color-grid{display:grid;grid-template-columns:1fr;gap:18px}.wsg-color-card{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:28px;align-items:stretch}.wsg-color-chip{height:100%;min-height:170px;border-radius:10px;border:1px solid rgba(0,0,0,.12);margin:0}.wsg-color-details{display:flex;flex-direction:column;justify-content:center;min-width:0}.wsg-color-details h3{margin:0 0 12px}

/* Einheitliche Wertzeilen in Farben, Typografie und Komponenten */
.wsg-spec-line,.wsg-value-row{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:12px;align-items:center;margin:7px 0;min-width:0}.wsg-spec-line>span{font-size:.82em;opacity:.68}.wsg-styleguide code{display:block;min-width:0;padding:.42em .62em;border-radius:4px;background:#fff!important;color:#000!important;border:1px solid rgba(0,0,0,.12);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;white-space:nowrap;overflow-x:auto;overflow-y:hidden;line-height:1.25}.wsg-spec-line code,.wsg-value-row code{overflow-wrap:normal;word-break:normal}.wsg-copy-btn{appearance:none;border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:.35em .75em;cursor:pointer;font:inherit;font-size:.8em;white-space:nowrap}.wsg-copy-btn:hover,.wsg-copy-btn:focus{opacity:.7}

.wsg-type-list{display:grid;gap:18px}.wsg-type-card{display:grid;grid-template-columns:minmax(280px,1.5fr) minmax(340px,1fr);gap:24px;align-items:center}.wsg-type-sample>*{margin:0}.wsg-type-meta>strong{display:block;margin-bottom:10px}.wsg-component-demo{min-height:90px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,currentColor 4%,transparent);border-radius:10px;margin:12px 0 18px;padding:16px}.wsg-demo-button,.wsg-demo-link{display:inline-block}.wsg-component-card h4{margin:18px 0 6px}.wsg-tech-item{display:flex;flex-direction:column;gap:6px}.wsg-tech-item span{font-size:.8em;opacity:.65}.wsg-notice{padding:16px;border:1px solid currentColor;border-radius:8px}.wsg-font-note{font-size:.82em;opacity:.68;margin:6px 0 10px}.wsg-source-line a{overflow-wrap:anywhere}

@media(max-width:700px){.wsg-styleguide{gap:30px}.wsg-asset-card,.wsg-color-card{grid-template-columns:1fr;gap:14px}.wsg-asset-preview{min-height:120px}.wsg-color-chip{height:110px;min-height:110px}.wsg-type-card{grid-template-columns:1fr}.wsg-spec-line,.wsg-value-row{grid-template-columns:68px minmax(0,1fr) auto;gap:8px}.wsg-copy-btn{padding:.35em .6em}}

/* Scan-Hinweis und optionale Urheberzeile */
.wsg-scan-hint{background:#fff;color:#000;border-color:rgba(0,0,0,.18)}
.wsg-credit{text-align:center;font-size:.86em;opacity:.72;padding-top:4px}