/* WEB-3: Webseiten-Vorschau — seitenspezifische Stile
   (Standing-Rule-Muster: eigene Datei statt index.css). */

.vorschau-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin: 0.75rem 0;
}

.vorschau-viewports {
  display: flex;
  gap: 0.35rem;
}

.vorschau-frame {
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--color-surface);
  overflow: hidden;
  height: min(70dvh, 50rem);
}

/* Smartphone-Ansicht: schmaler Rahmen, mittig — wie ein Handy auf dem Tisch. */
.vorschau-frame--phone {
  max-width: 400px;
  margin-inline: auto;
}

.vorschau-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}