/* Rahmen von bravique um jedes Light-Beispiel. Immer in bravique-Farben, nie in denen des Beispiels. */
@font-face { font-family: "bq Inter"; src: url(/assets/inter-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "bq Inter"; src: url(/assets/inter-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "bq Mono"; src: url(/assets/dm-mono-400.woff2) format("woff2"); font-display: swap; }

.demo-chrome {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 8px 24px;
  background: #181a17; color: #f7f5ef;
  font: 13px/1.5 "bq Inter", "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 15px #0002;
}
.demo-chrome a { color: inherit; text-decoration: none; }
.demo-back { justify-self: start; padding: 6px 0; }
.demo-back:hover span, .demo-anfragen:hover { color: #d5ef9b; }
.demo-blaettern { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.demo-blaettern a {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid #666b5e; border-radius: 3px;
}
.demo-blaettern a:hover { background: #f7f5ef; color: #181a17; }
.demo-blaettern svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.demo-blaettern span { min-width: 0; padding: 0 4px; }
.demo-anfragen { justify-self: end; padding: 6px 0; border-bottom: 1px solid #9da691; }
.demo-chrome :focus-visible { outline: 2px solid #d5ef9b; outline-offset: 2px; }

.demo-indicator {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 24px;
  background: #e9e6de; color: #53584c;
  font: 11px/1.5 "bq Mono", ui-monospace, Menlo, Consolas, monospace;
}

.demo-disclosure {
  padding: 18px 24px;
  background: #e9e6de; color: #53584c;
  font: 12px/1.6 "bq Inter", "Helvetica Neue", Arial, sans-serif;
}
.demo-disclosure p { max-width: 1150px; margin: 0 auto; }

@media (max-width: 759px) {
  .demo-chrome { position: static; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 6px 16px 8px; font-size: 12px; }
  .demo-blaettern { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .demo-indicator { padding: 7px 16px; }
  .demo-indicator span + span, .demo-chrome .nur-gross { display: none; }
  .demo-disclosure { padding: 16px; }
}