/*
 * Det som är gemensamt för exempelsidorna under /exempel: remsan överst som säger att företaget är påhittat, och rutan
 * som visas när någon provar formuläret, telefonnumret eller e-postadressen. Resten av varje exempel har sin egen
 * stilmall, så att de inte ser ut som gustavdev.se eller som varandra.
 */
.exempel-remsa {
  background: #111418; color: #e9ecef;
  font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding: 10px 16px; text-align: center;
}
.exempel-remsa a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.exempel-remsa b { font-weight: 600; color: #fff; }

.exempel-ruta {
  position: fixed; left: 50%; bottom: 24px; z-index: 50;
  width: min(440px, calc(100% - 32px));
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: #111418; color: #e9ecef; border-radius: 12px;
  padding: 14px 18px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: opacity 0.2s, transform 0.2s;
}
.exempel-ruta.syns { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .exempel-ruta { transition: none; }
}