/* Schlichte Beispiel-Websites, damit Interessenten das Widget "in echt" sehen. */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #222; line-height: 1.6; background: #fff; }
.demo-banner { background: #1b2a3a; color: #fff; font-size: 14px; padding: 8px 20px; text-align: center; }
.demo-banner a { color: #d9b56c; }
.site-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 6vw; border-bottom: 1px solid #e5e5e5; gap: 16px; flex-wrap: wrap; }
.logo { font-weight: 800; font-size: 22px; color: var(--brand); text-decoration: none; }
.site-head nav { display: flex; gap: 20px; font-size: 15px; flex-wrap: wrap; }
.site-head nav a { color: #444; text-decoration: none; }
.hero { padding: 72px 6vw; background: var(--brand-soft); }
.hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin: 0 0 16px; max-width: 18ch; color: var(--brand-dark); }
.hero p { font-size: 19px; max-width: 46ch; margin: 0 0 24px; color: #333; }
.cta { display: inline-block; padding: 13px 22px; border-radius: 6px; background: var(--brand); color: #fff; text-decoration: none; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; padding: 64px 6vw; }
.grid h2 { font-size: 20px; margin: 0 0 8px; color: var(--brand-dark); }
.grid p, .grid ul { margin: 0; color: #444; }
.grid ul { padding-left: 18px; }
.site-foot { padding: 32px 6vw 120px; background: #f4f4f4; font-size: 14px; color: #555; }