/* Rahmen der Vorschau-Hülle. Bewusst schlicht und mit niedriger Spezifität, damit Baustein-CSS gewinnt. */

/* Der Hintergrund-Schalter ist unabhängig von Hell/Dunkel (data-theme, color-scheme). */
html {
  background: #ffffff;
}

html[data-background="dark"] {
  background: #18181b;
}

html[data-background="grid"] {
  background-color: #fafafa;
  background-image:
    linear-gradient(#e4e4e7 1px, transparent 1px),
    linear-gradient(90deg, #e4e4e7 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Token-Farbe: das Token brand.primary, das die App mit der Nachricht `tokens` auf :root setzt. */
html[data-background="customer"] {
  background: var(--brand-primary, #ffffff);
}

/* Nur Thumbnails von Bausteinen ohne eigenen Vorschau-Hintergrund: dezentes Grau, wie die Fläche der Karte. */
html[data-background="neutral"] {
  background: #f4f4f5;
}

/* Wie eine typische Seite: serifenlose Systemschrift statt Times, wenn der Baustein keine eigene setzt. */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

#atelier-stage {
  padding: 2rem;
}

/* Thumbnails der Bibliothek (Modus `thumb`, Viewport 1280 × 800): shell.js misst den Baustein. Kompakte verschiebt sie per
   left/top in die Mitte (relativ, damit sich das Layout nicht ändert); seitenbreite stehen ohne Rand oben wie ein
   Screenshot. Keine Scrollbalken, sie nähmen dem Viewport Breite. */
html[data-mode="thumb"] {
  overflow: hidden;
}

html[data-mode="thumb"] #atelier-stage {
  position: relative;
}

html[data-mode="thumb"][data-fit="page"] #atelier-stage {
  padding: 0;
}