/* Beispielprojekte: gebaute Beispielseite (ein Markup, Layout folgt der Rahmenbreite) und die Live-Demos der Bausteine. */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; justify-items: center; } .duo .bf { width: 100%; } }
.bf--mock .bf-fenster { max-height: none; overflow: hidden; }
.hf--mock { width: 250px; margin: 0; }
.hf-schirm { aspect-ratio: 9 / 19; overflow: hidden; border-radius: 20px; background: #fff; }
.hf-schirm .mock { height: 100%; }

.mock { container-type: inline-size; --m-bg: #fbf4ea; --m-ink: #3b2417; --m-a: #c2562a; background: var(--m-bg); color: var(--m-ink); }
.mock--salon { --m-bg: #f3f6f0; --m-ink: #1f2a24; --m-a: #5f7f5c; }
.mock--treuhand { --m-bg: #f5f4ee; --m-ink: #17261d; --m-a: #a8832a; }
.mock-nav { display: flex; align-items: center; gap: 4cqi; padding: 2.4cqi 4cqi; border-bottom: 1px solid color-mix(in oklab, var(--m-ink) 12%, transparent); font-size: clamp(10px, 2.2cqi, 15px); }
.mock-nav b { font: 700 1.3em var(--f-display); letter-spacing: -0.02em; }
.mock-nav span { margin-left: auto; opacity: 0.65; font-size: 0.85em; white-space: nowrap; }
.mock-k { font-style: normal; padding: 0.55em 1.1em; border-radius: 999px; background: var(--m-a); color: #fff; font-weight: 600; font-size: clamp(10px, 2cqi, 14px); white-space: nowrap; }
.mock-nav .mock-k { margin-left: 1em; }
.mock-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 32cqi; }
.mock-hero img { width: 100%; height: 100%; object-fit: cover; order: 2; }
.mock-txt { padding: 5cqi 4cqi; display: flex; flex-direction: column; justify-content: center; gap: 2cqi; align-items: flex-start; }
.mock-txt h3 { font: 700 clamp(18px, 5.2cqi, 40px)/1.06 var(--f-display); letter-spacing: -0.03em; }
.mock-txt p { font-size: clamp(11px, 2.2cqi, 16px); opacity: 0.75; }
.mock-chips { display: flex; flex-wrap: wrap; gap: 1.4cqi; padding: 3cqi 4cqi 4cqi; }
.mock-chips li { padding: 0.5em 1em; border-radius: 999px; font-size: clamp(10px, 2cqi, 14px); font-weight: 600; background: color-mix(in oklab, var(--m-a) 14%, #fff); color: var(--m-ink); }
@container (max-width: 480px) {
  .mock-nav span { display: none; } .mock-nav .mock-k { display: none; } .mock-nav { justify-content: center; padding: 3cqi; }
  .mock-hero { grid-template-columns: 1fr; } .mock-hero img { order: 0; aspect-ratio: 16 / 11; height: auto; }
  .mock-txt { padding: 6cqi 5cqi; gap: 3cqi; } .mock-txt h3 { font-size: 7.4cqi; } .mock-txt p { font-size: 4.2cqi; } .mock-k { font-size: 3.8cqi; }
  .mock-chips { padding: 4cqi 5cqi; gap: 2cqi; } .mock-chips li { font-size: 3.6cqi; }
}

/* Demos */
.demos { align-items: stretch; }
.demo { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.demo h3 { font: 600 22px/1.2 var(--f-display); letter-spacing: -0.02em; }
.demo-kopf { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hi); }
.demo-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-reihe button { padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.8); font: 600 14px var(--f-body); color: var(--ink); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; }
.demo-reihe button:hover { transform: translateY(-1px); border-color: var(--a1); }
.demo-reihe button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.demo-felder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .demo-felder div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); }
.demo-felder dt { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .demo-felder dd { margin: 4px 0 0; font-weight: 600; }
.demo-ok { min-height: 1.4em; font-weight: 600; color: var(--hi); }
.demo .btn { align-self: flex-start; }
.demo-chat { display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.demo-chat p { max-width: 90%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; }
.demo-chat .q { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.demo-chat .a { align-self: flex-start; background: color-mix(in oklab, var(--a1) 13%, #fff); border-bottom-left-radius: 4px; }
.demo-karte li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); } .demo-karte li:first-child { border-top: 0; } .demo-karte b { font-variant-numeric: tabular-nums; }